<body id='...'>

Sat Jan 17 09:30:10 PST 2015

On 1/17/15 1:29 AM, Jacob Carlborg wrote:
> On 2015-01-17 09:22, Andrei Alexandrescu wrote:
>> Hello,
>>
>>
>> I was looking at
>> http://css-tricks.com/examples/CleanCode/Beautiful-HTML.png, which
>> includes an interesting comment: "ID applied to body to allow for unique
>> page styling without any additional markup."
>>
>> That sounds pretty interesting, so I plan to add id="$(TITLE)" to the
>> <body> tag of all dlang.org. Does anyone know how exactly that works?
>
> The idea is that you have a unique ID attached to the body tag. This
> needs to not only be unique in the given page but also among all pages.
> The easiest is probably to use the URL of the current page, replace
> slashes with dash or underscore. Something like this:
>
> For the page http://dlang.org/spec.html
>
> <html>
>    <body id="spec">
>      ...
>    </body>
> </html>
>
> Then in the CSS you can add special styling for a given page, like this:
>
> // custom styling for the "spec" page
> body#spec {
>    background-color: black;
> }
>
> // custom styling for the "lex" page
> body#lex {
>    background-color: white;
> }
>
> In the above examples "spec" should match the URL of the current page.

Thanks! See http://goo.gl/aHeZmQ where I've added the page title as the 
ID. Sadly that doesn't work for titles that contain whitespace (quite a 
few), see 
http://stackoverflow.com/questions/5688200/can-i-use-white-spaces-in-the-name-attribute-of-an-html-element.

I think we need a ddoc macro REPLACE such that e.g. $(REPLACE a, A, b, 
B, abC) yields ABC. That would also help things like ddoc -> json 
generation.

> The idea is that you can tweak the styling for a given page, not give it
> a completely new look. Or to style elements that are not present on
> other pages.
>
> This technique is only useful when you're using the same CSS style sheet
> for all your pages, which you should.
>
> I don't know if there's an easy way to get the URL in Ddoc. It's easy
> using server side software.

For now I guess we can implement REPLACE and fix the ID with Javascript.

Andrei