pretty mailman listinfo pages?

Gérard Talbot browserbugs at gtalbot.org
Wed Apr 23 10:50:43 UTC 2014


Le 2014-04-22 21:40, Gérard Talbot a écrit :
> Le 2014-04-22 19:15, Ahmed Fathy Hussein a écrit :

> -----------
> 
> Here's a simple experiment that anyone can do and then check what I've
> been trying to explain about bootstrap.css in bug 317553
> https://bugs.kde.org/show_bug.cgi?id=317553
> 
> In the page, we have the following:
> 
> <h1><strong>About kde-www</strong></h1>
> 

The bootstrap.css code even had

strong {
font-weight: bold;
}

at line 789. All browsers I know of (including NS4) have in their user 
agent style sheet

strong {font-weight: bold;}

So, this is an 8th declaration which can be safely removed because it is 
pointless, irrelevant, unneeded.

> h1 {
>     font-size: 2.2em;
>     line-height: 2.56em;
> }
> h1, h2, h3, h4, h5, h6 {
>     margin: 0px;
>     font-family: "Open Sans Light","Helvetica 
> Neue",Helvetica,Arial,sans-serif;
>     font-weight: normal;
>     color: #204A87;
>     text-rendering: optimizelegibility;
>     text-shadow: 0px 1px 0px white;
>     word-wrap: normal;
> }
> body {
>     font-family: "Open Sans","Helvetica 
> Neue",Helvetica,Arial,sans-serif;
>     font-size: 14px;
>     line-height: 1.6em;
> }
> 
> 
> In Firefox 28.0, with developer tools/Inspection, just disable the
> declarations (uncheck the corresponding checkboxes) so that you end up
> with only the following markup and CSS code:
> 
> 
> <h1>About kde-www</h1>
> 
> h1, h2, h3, h4, h5, h6 {
>     color: #204A87;
>     text-rendering: optimizelegibility;
> }
> 
> body {
>     font-family: "Open Sans","Helvetica 
> Neue",Helvetica,Arial,sans-serif;
>     font-size: 14px;
>     line-height: 1.6em;
> }
> 
> 
> That is what I did with developer tools: I have reduced the number of
> nodes and I have removed 7 declarations and I end up with the - almost
> exact - same rendered layout. This is a fair demonstration of
> re-declarations, over-declaring, over-coding, not relying on
> inheritance, not understanding default values, user agent style sheets
> CSS rules, etc.. do.
> text-shadow: 0px 1px 0px white; could be also safely removed as the
> shadow has the same color of the background of page
> word-wrap is by default normal; so there is no need to declare this
> font-family is a property that is inherited

font-family was not inherited in the code (body had "Open Sans" while 
the headings had "Open Sans Light") but this is where the over-excessive 
re-declarations to affect emboldening happens. Light, font-weight: 
normal, then strong wrapping and increased font size to 2.2em: all of 
this is "yo-yo"-ing the font-weight of the text. h1 is bold by default 
in all user agent style sheets. And so, the font-weight of the words 
"About kde-www" is modified 5 times, not 4 like I originally thought.

> h1's vertical margins and font-size is the same in all major browsers'
> user agent style sheet

And this is very easy to verify too. Firefox's DOM inspector allows you 
to inspect its user agent style sheet rules:
resource://gre-resources/html.css
Chrome's Web inspector shows user agent style by default: you can turn 
it on/off by clicking the gear icon.
IE9, IE10 and IE11: http://www.iecss.com/

In case of h1 heading, all 3 browsers (IE9+, Firefox, Chrome) use the 
following (same value for font-size, font-weight, margins) in their user 
agent style sheet:

h1{
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;}

Gérard

> why zero the vertical margins and then recreate pseudo-margins with an
> increased line-height?
> The font-weight of the text is emboldened and then removed and then
> emboldened again and then removed with the <strong> element, the
> font-family (Light usually means font-weight 300 or less), increased
> font-size and then font-weight: normal. I hope people see what I see
> here: the font-weight of the words "About kde-www" is increased twice
> and decreased twice.
> Etc...
> 
> I made the same changes and removals in Chrome 34.0.1847.116 and ended
> up with the same layout. Same conclusion.
> 
> Gérard

-- 
Konqueror Implementation Report of CSS 2.1 test suite (RC6): 9418 
testcases
http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/Konq-IR-CSS21TestSuite.html
53 Bugs in Konqueror 4.13.0
http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/
Contributions to the CSS 2.1 test suite
http://www.gtalbot.org/BrowserBugsSection/css21testsuite/
CSS 2.1 Test suite RC6, March 23rd 2011
http://test.csswg.org/suites/css2.1/20110323/html4/toc.html


More information about the kde-www mailing list