Namespace Selection

[tooolbox]

I'm submitting a question.

Short description of the issue/suggestion:

I would like to know if there's a standard/blessed way in Readium CSS to select elements with a namespaced attribute.

In ReadiumCSS-night_mode.css I see this:

:root:--night-mode *[epub\:type~="titlepage"] img:only-child {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

But in ReadiumCSS-base I see namespace declarations, which are supposed to enable [ns|attr="value"] syntax:

@namespace url("http://www.w3.org/1999/xhtml");
@namespace epub url("http://www.idpf.org/2007/ops");
@namespace m url("http://www.w3.org/1998/Math/MathML/");
@namespace svg url("http://www.w3.org/2000/svg");

So... | or \: ? (I am targeting something in the epub namespace, so it's declared, in case that's a question.)

[JayPanoz]

Ah right thanks for catching this.

So 2 notes (and a bug fix to implement on my side).

1. the ReadiumCSS-base is compiled in a before.css dist stylesheet, the ReadiumCSS-night_mode.css in an after.css dist stylesheet so the namespace doesn’t apply for this selector – here’s why there are different stylesheets;
2. in theory it shouldn’t happen but in case it happens, ideally ReadiumCSS wants to handle content being served as text/html instead of application/xhtml+xml as well.

That said, escaping doesn’t work for XHTML so there should have been a namespace declaration in the after stylesheet + epub|type and I’ll correct this – but if you want to cover the “served as html use case”, I’d say both should be used.

I’ll make this correction later today directly in the develop branch.

[tooolbox]

Okay so basically:

[ns|attr="value"], [ns\:attr="value"] {
    // ...
}

Got it, not too hard.

There's a lot of discussion at https://github.com/readium/swift-toolkit/issues/139 so I'm not even sure if I'll proceed this way but good to know.