www.digitalmars.com         C & C++   DMDScript  

digitalmars.D - <body id='...'>

reply Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
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?


Thanks,

Andrei
Jan 17 2015
next sibling parent reply Jacob Carlborg <doob me.com> writes:
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.

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.

-- 
/Jacob Carlborg
Jan 17 2015
parent reply Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
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
Jan 17 2015
parent Jacob Carlborg <doob me.com> writes:
On 2015-01-17 18:30, Andrei Alexandrescu wrote:


 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.


Stackoverflow seems to be down for the moment but no, whitespace will 
not work for this case. Because space in a CSS selector means nested 
element. This is a great resource for CSS selectors [1].


 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.


It's safer to use the URL.


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


Will that even work? The browser has most likely already loaded the CSS 
when the JavaScript is run. You also need to make sure the DOM is ready 
to change it.

What currently determines the URL, the name of the document? Is that 
accessible?

[1] http://www.w3schools.com/cssref/css_selectors.asp

-- 
/Jacob Carlborg
Jan 18 2015
prev sibling parent reply "Sebastiaan Koppe" <mail skoppe.eu> writes:
On Saturday, 17 January 2015 at 08:22:19 UTC, 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?


 Thanks,

 Andrei


What would be the benefit? Applying styles per page seems like a 
lot of workload for only one page. What if you want those styles 
to be applied on another page? Seems messy to me.
Jan 17 2015
next sibling parent Andrei Alexandrescu <SeeWebsiteForEmail erdani.org> writes:
On 1/17/15 2:16 AM, Sebastiaan Koppe wrote:

 On Saturday, 17 January 2015 at 08:22:19 UTC, 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?


 Thanks,

 Andrei


 What would be the benefit? Applying styles per page seems like a lot of
 workload for only one page. What if you want those styles to be applied
 on another page? Seems messy to me.


It's good to have the capability of styling some pages slightly 
differently. I think that's rather obvious. -- Andrei
Jan 17 2015
prev sibling parent Jacob Carlborg <doob me.com> writes:
On 2015-01-17 11:16, Sebastiaan Koppe wrote:


 What would be the benefit? Applying styles per page seems like a lot of
 workload for only one page.


It's not, at least not with a sane server side framework.

If you have an element that is only available on a specific page and you 
want to style that.

<body id="foo">
   <table>
   ...
   </table>
</body>

body#foo table {
   background-color: red;
}

Or alternatively:

<body>
   <table id="foo">
   ...
   </table>
</body>

table#foo {
   background-color: red;
}

If you have several element that needs this kind of styling you only 
need to add one "id", to the "body" tag. Instead of to each individual 
tag. This also works great with Sass, which support nested rules:

body#foo {
   table {
     background-color: red;
   }

   ul { ... }
}


 What if you want those styles to be applied on another page? Seems messy to me.


Then you obviously don't scope the styling for only that page ;). It's 
also possible to add multiple selectors for a given set of CSS rules. If 
you're using something like Sass you have many options with reusability, 
like mixins, inheritance, functions and so on.

-- 
/Jacob Carlborg
Jan 18 2015