Re: [css-d] Transcendant web design and CSS3
2010/3/8 Jeff Zeitlin edi...@freelancetraveller.com: On Mon, 8 Mar 2010 09:11:25 +0900, Philippe Wittenbergh e...@l-c-n.com wrote: ... He also advocates NOT trying to make the presentation of a website look the same in all browsers, but to write to the limit of the CSS capabilities of each individual browser, and use things like conditional includes, media rules, and @import to control what CSS gets seen/used by which browser(s). Which is a philosophy I fully support. It is called progressive enhancement. No. He specifically denigrates Progressive Enhancement, describing it as ...begins with less capable browsers such as Internet Explorer 6 and then uses CSS selectors to add functionality. His Transcendent CSS abandons the notion that a less-capable browser is the benchmark, and sets that benchmark squarely where it belongs today, with the CSS2.1 specification and those browsers that support it. It uses all the available CSS2.1 features, not to add visual enhancement, but to accomplish the best design for the most, standards-capable browsers. Progressive Enhancement minus IE6. Phasing out IE6 is a matter of time, not of the right wording. Name this Transcending if you like to, but normally Progressive Enhancement and Graceful Degradation already are confusing enough. Ingo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Combining :only-of-type with :before?
Den 6. mar. 2010 kl. 08.09 skrev Philippe Wittenbergh: On Mar 6, 2010, at 12:04 AM, Sjur Moshagen wrote: The other thing i missed was the need to use double colons, like ::before - I tried only ':before'. What's the reason? When used directly with an element only a single colon (like :before) is needed. CSS2.1 vs CSS3 notation as Tim pointed out. Thanks to both you and Tim for taking the time to explain. Best regards, Sjur Moshagen __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] understading ul li as menus - A 5 question quest.
On Mar 7, 2010, at 11:26 PM, MEM wrote: Ingo already gave you an explanation for what that space is (white-space nodes in the html mark-up) When you float the element or otherwise set to to display block, html parsing rules kicks in, and basically those nodes are suppressed for display purposes. A lot to discover here. What are those white-space nodes on html ? Not white-space nodes on html, but all kind of white-space nodes in the whole source code. That include line-feeds, etc. see 16.6.1 The 'white-space' processing model http://www.w3.org/TR/CSS21/text.html#white-space-model What other white-space nodes can we find? Why inline accepts those white spaces and block elements don't ? Is this something to do with box-model ? Does the box model apply to inline elements? Why has a markup language white spaces? No this has nothing to do with any box model, and yes, the box model applies to inline elements (although width and height don't apply to those). Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] understading ul li as menus - A 5 question quest.
On Mar 7, 2010, at 11:26 PM, MEM wrote:
the parent UL DIV are set to 'overflow:hidden', the a elements are
set to display: inline. The padding (top and or bottom) is applied to the
elements, but because it is an inline element, the
excess padding will be clipped by the overflow:hidden.
Ok. But if I remove the display:inline; should the padding-top and bottom of
those elements (that are no longer inline), be rendered on the viewport,
despite the overflow:hidden; declaration ?
If I remove only the display:inline; and I keep the overflow:hidden; I still
can't see the padding effects:
http://www.nuvemk.com/formacao_lx/outros/ul_li_tests_v3.html
well the a element is still inline (I was referring to that element in my
answer above). Try setting to a to display: inline-block in that test case.
Line-height should affect the layout though.
and if I remove the padding declarations and try to do it with line-height
property, I still can't see any effects on the vertical space augmentation:
http://www.nuvemk.com/formacao_lx/outros/ul_li_tests_v4.html
You apply the line-height to the a element. this won't affect the
layout/height of the box which is governed by the line-box generated by the
block element (LI in this case). Apply to line-height to the parent block (like
the UL or the LI). or do the same as above: a {display: inline-block;} (or
block)
So, I still have doubts here:
but because it is an inline element, the
excess padding will be clipped by the overflow:hidden.
because it seems that, even if we remove the display:inline; property, the
padding is still clipped,if we keep that overflow:hidden; declaration.
As I explained above, your a element is an inline element. You had originally
applied that display:inline to the parent li (iirc). In the testcases above,
you float the li, but you apply the padding to the a.
Since to accomplish this,
http://www.nuvemk.com/formacao_lx/outros/ul_li_tests_v2.html
we need to remove the overflow:hidden; declarations, may I presume that, on
this case, this is not the proper hasLayout trigger to sue?
In your opinion, what effective hasLayout trigger can be used here?
I rarely use overflow:hidden for these kind of constructs. If the intent is to
contain the floated blocks for 'good' browsers, there are many ways. Google
'containing floats'. if your use of 'overflow:hidden' is solely and only to
trigger 'hasLayout' for IE 6 7, you could use 'zoom:1;'
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] freaking error
Bruno Fassino wrote: On Mon, Mar 8, 2010 at 7:38 AM, David Laakso login: tl pass: tl1 [1] http://chelseacreekstudio.com/tl/tl_7.htm The third one, srooks00.gif, does not appear flush left in spite of being in a left floated box. The reason is that the height of the second one (ssheerr_.gif) is smaller than the first one (58px versus 60px; height specified in the html as attribute of img), and a left float always prefers to stay higher than more to the left. Best, Bruno Thank you, Bruno...not even my twisted-sister could figure that out. Smaller height image moved to last and final block on left. Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] amirabbas.abdolali has invited you to Spokeo
Hi css-d,br/br/ amirabbas.abdol...@gmail.com has invited you to try Spokeo, which finds your friends' updates across the Web. Your friends are already using Spokeo to follow you on Web Results. Try Spokeo today to find what your friends are doing across 30 different social networks! Click http://www.spokeo.com/public/join?c=60c872e279b80c02c249395efb6606e27f7b8286 to accept your invitation. - This invitation was sent with amirabbas.abdolali's approval. If you wish to opt out of all future emails, go to http://www.spokeo.com/optout?c=c494956495349575549 Copyright (c) 2010 Spokeo, Inc. All rights reserved. 556 S. Fair Oaks Ave, #101-179, Pasadena, CA 91105 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Gap in IE8
Hi, In IE8 I'm getting a gap somewhere between an image (a JS slide show in #slider) and the containing div #pma: http://onenetwork.com The extra blue space above the main image should not be there, and the bottom of the image is getting clipped. This is only happening in IE8. I'd appreciate any ideas! Thanks, Nigel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transcendant web design and CSS3
On Mon, 8 Mar 2010 18:19:08 +1100, Alan Gresley a...@css-class.com wrote: You can still support IE6- but some authors just don't want to bother understanding why IE6- has shocking CSS2.1 support or why a document is rendered broken in IE6-. I agree with Andy Clarke by sending IE6/Win un-styled pages but their is also that user agent IE5/Mac. I'm not making myself clear. He is not serving IE6- an *unstyled* page, he is serving it a DIFFERENTLY styled page, and a style that is just as complex - but different. Different graphical accents. Black-and-white photographs instead of color photographs. Differences like that. IMO, the same kind of stupid penalization of IE that it suffered when Netscape users would use the (unsupported-by-Netscape) FONT tag to set the Symbol font (making the page unreadable in IE) when the first version of IE came out. He wants to treat IE6 like the same kind of pariah that Netscape 4 has been for years, with less excuse in the case of IE6, because IE6 DOES support most of what he wants to do. I understand that one cannot expect to see THE SAME THING in all browsers, as though the screen was a printed page; nevertheless, the philosophy that I learned when I was first starting web design (and the use of CSS) was to try to avoid radical differences in the appearance from browser to browser, or screen size to screen size. That's what I've done with my website at http://www.freelancetraveller.com - but it appears that Mr Clarke disagrees with this philosophy, embracing its opposite, and THAT is what I am questioning. I also disagree with that backwards philosophy. I attempt to suggest of philosophy of styling a page with future support in mind. My own test pages shows this philosophy. You are saying that it is a 'backwards philosophy' to design for a consistent visitor experience? Are we seriously - and intentionally - going back to the days of 'Best when viewed with preferred-browser', but based on CSS support instead of support for HTML extensions? Are you seriously suggesting that if I like a two-column print layout, I sould write my print stylesheet for it, and to hell with any browser that doesn't support it, letting it have whatever the defaults are? Or that I should have different print stylesheets for Trident vs. Gecko vs. Webkit vs. whatever? That I should use generated content in the CSS where it will make the page whizbang, even if it's not supported by all browsers, and a failure to generate the content makes the page meaningless in that browser? That's certainly what it sounds like you're saying. And if it is, then I *cannot* support that OBSCENE philosophy; I'll stick with 'graceful degradation'. Or maybe it's called 'progressive enhancement'. But what it IS, is ACCEPTING that the Web is NOT the printed page, that all browsers and computers and displays are NOT created equal, and while not designing for an inarguably badly broken (from the CSS support viewpoint) browser like Netscape 4, at least making an effort to ensure that the results in arguably usable browsers such as IE5.5 and later aren't unusable. I have been using CSS3 for over 2 years. IE9 will have support for rounded corner so nested divs could be seeing their last days. Here is a page of mine (style is basically from 2008) that uses CSS3 and give some examples. http://css-class.com/test/css/ Yay for rounded corners. But note that I was talking about RADICAL differences in the original post. The difference between rounded and pointy corners is noticeable from an æsthetic point of view, but it is not RADICAL, and I don't see how it justifies serving up a completely different design for browsers that don't support them. BTW, thanks for the link to CSS3.info on that site; the selectors test there is another useful and interesting resource (and reveals just how badly Trident/IE7 is lagging in CSS support as compared with the versions of Webkit and Gecko that ship with LunaScape). __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transcendant web design and CSS3
On 3/7/10 5:32 PM, Theresa Mesa wrote: Plus, I don't think the vast majority of website owners are going to permit the charges for the kind of time this would take, so while it would be worthwhile to try on one's own site, it's probably not best to effect this across all your sites in progress. Now that's an interesting viewpoint. Because, for me, using CSS3 to enhance pages for capable browsers seems to me a way of saving time. For example, making images to add rounded corners takes a lot more time than using CSS... But then, for me, trying to make pages look the same in all browsers seems as futile as attempting to display color on a black-and-white TV... Cordially, David -- __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transcendant web design and CSS3
At 19:40 -0500 on 03/07/2010, Freelance Traveller wrote about Re: [css-d] Transcendant web design and CSS3: Thank you; this does indeed appear to be quite useful - and tells me that CSS3 is not ready for prime time, and probably should not yet be used as I'd like to use it. It is not ready for prime time and will not be ready for the foreseeable future due to the need to serve to IE Browsers. So long as you can ignore IE support (or can serve a stripped down version to the IE holdout users) you can according to the chart use it now since all the other browsers currently support it (or do with all but obsolete versions). -- Bob Rosenberg RockMUG Webmaster webmas...@rockmug.org www.RockMUG.org __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Gap in IE8
2010/3/8 N Duckworth nduckwo...@gmail.com: Hi, In IE8 I'm getting a gap somewhere between an image (a JS slide show in #slider) and the containing div #pma: http://onenetwork.com The extra blue space above the main image should not be there, and the bottom of the image is getting clipped. This is only happening in IE8. ... The IMG is already display:block, and so the containing A should probably get display:block, too. Ingo __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] ADMIN: amirabbas.abdolali has invited you to Spokeo
At 12:41 PM + 3/8/10, amirabbas.abdol...@gmail.com wrote: amirabbas.abdol...@gmail.com has invited you to try Spokeo, which finds your friends' updates across the Web. Reason #47 not to let a social networking site harvest your address book and spam everyone you know: sometimes, you end up spamming 8,500+ people you don't personally know from all over the world. Reason #48: it will get booted from the community as a result. As the posters in my junior high school wood shop class used to say, don't let this happen to you. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.com/) __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transcendant web design and CSS3
I have a grid of all the CSS3 selectors and browser support on my blog at http://www.standardista.com/css3/css3-selector-browser-support The values and properties are on my old blog at http://www.evotech.net/blog/2010/02/css3-properties-values-browser-support/ this is a huge file, so it may take a bit if you're on low bandwidth I go into further detail on a few of the CSS3 modules: Border Properties http://www.standardista.com/css3/css3-border-properties Background Properties: http://www.standardista.com/css3/css3-background-properties Font-face http://www.standardista.com/css3/font-face-browser-support Columns (just browser grid, no explanation yet) http://www.standardista.com/css3/css3-columns-browser-support Note taht for all of these posts, except for columns, the grid of support is at the top, and quirks and usage are explained at the bottom. I also did a presentation on CSS3 properties that are supported well enough to be used, since there are IE workarounds for them. http://www.standardista.com/css3-implementable-features Note that sites like Twitter.com are using CSS3, and it degrades nicely to IE. As long as it looks decent in IE, it doesn't need to look identical in all browsers. standardista, for example, is all CSS3 and HTML5. I works fine in IE7 and IE8, but has added appearance features in CSS3 supporting browsers. I think that is the way to go. No need to hold back to cater to non-supporting browsers, but you defnitely want your sites to work everywhere. -Estelle http://www.standardista.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transcendant web design and CSS3
I have a grid of all the CSS3 selectors and browser support on my blog at http://www.standardista.com/css3/css3-selector-browser-support The values and properties are on my old blog at http://www.evotech.net/blog/2010/02/css3-properties-values-browser- support/ this is a huge file, so it may take a bit if you're on low bandwidth I go into further detail on a few of the CSS3 modules: Border Properties http://www.standardista.com/css3/css3-border-properties Background Properties: http://www.standardista.com/css3/css3-background-properties Font-face http://www.standardista.com/css3/font-face-browser-support Columns (just browser grid, no explanation yet) http://www.standardista.com/css3/css3-columns-browser-support These are great, thanks for sharing -- Regards, Thierry www.tjkdesign.com | articles and tutorials www.ez-css.org | ultra light CSS framework __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Transcendant web design and CSS3
Jeff Zeitlin wrote:
On Mon, 8 Mar 2010 18:19:08 +1100, Alan Gresley a...@css-class.com
wrote:
You can still support IE6- but some authors just don't want to bother
understanding why IE6- has shocking CSS2.1 support or why a document
is rendered broken in IE6-. I agree with Andy Clarke by sending
IE6/Win un-styled pages but their is also that user agent IE5/Mac.
I'm not making myself clear. He is not serving IE6- an *unstyled* page,
he is serving it a DIFFERENTLY styled page, and a style that is just as
complex - but different. Different graphical accents. Black-and-white
photographs instead of color photographs. Differences like that. IMO,
the same kind of stupid penalization of IE that it suffered when
Netscape users would use the (unsupported-by-Netscape) FONT tag to set
the Symbol font (making the page unreadable in IE) when the first
version of IE came out. He wants to treat IE6 like the same kind of
pariah that Netscape 4 has been for years, with less excuse in the case
of IE6, because IE6 DOES support most of what he wants to do.
Ok, I see. He want IE6- to render a page like it antiquated or ugly. I
totally agree but this has to be a top down banishment of IE6-. The
governments and the corporations of this world have to inform the
masses (by whatever medium) that there are 100s of thousands of web
designers pleading for users to stop using IE6-. This does require
large scale activism.
I see a further dilemma with the fact that governments and
corporations still serve pages in quirks mode which IE6 handles
brilliantly. Please direct IE8 to this page.
http://css-class.com/test/bugs/ie/ie-chaos2.htm
I also disagree with that backwards philosophy. I attempt to suggest
of philosophy of styling a page with future support in mind. My own
test pages shows this philosophy.
You are saying that it is a 'backwards philosophy' to design for a
consistent visitor experience? Are we seriously - and intentionally -
going back to the days of 'Best when viewed with preferred-browser',
but based on CSS support instead of support for HTML extensions? Are
you seriously suggesting that if I like a two-column print layout, I
sould write my print stylesheet for it, and to hell with any browser
that doesn't support it, letting it have whatever the defaults are?
Yes, especially since all user agents now use the same default styles.
Please again look at this page.
http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm
Note the last column with _Final Styles_. For authors to allow the
user agent defaults to flow into the cascade of CSS, one person in
particular (hint, list chaperon) has to stop promoting _CSS resets_.
Or
that I should have different print stylesheets for Trident vs. Gecko vs.
Webkit vs. whatever? That I should use generated content in the CSS
where it will make the page whizbang, even if it's not supported by all
browsers, and a failure to generate the content makes the page
meaningless in that browser? That's certainly what it sounds like
you're saying. And if it is, then I *cannot* support that OBSCENE
philosophy; I'll stick with 'graceful degradation'.
There is no graceful degradation. You have large steps of degradation.
BTW, my test page use one CSS file. This works perfectly well in all
browsers accept IE6- but each version of each browser does show
changes in level of support for CSS3. IE7 looks fine but I do have a
bug to simulate what display:table achieves in other browsers.
Or maybe it's
called 'progressive enhancement'. But what it IS, is ACCEPTING that the
Web is NOT the printed page, that all browsers and computers and
displays are NOT created equal, and while not designing for an
inarguably badly broken (from the CSS support viewpoint) browser like
Netscape 4, at least making an effort to ensure that the results in
arguably usable browsers such as IE5.5 and later aren't unusable.
I reject this. If you know how CSS works or which CSS bugs particular
browser have, then you can send basically the same style to each page.
Note, some HTML can not be styled and function correctly in IE7.
Sometimes the HTML must be altered to not send IE7 buggy.
I have been using CSS3 for over 2 years. IE9 will have support for
rounded corner so nested divs could be seeing their last days. Here is
a page of mine (style is basically from 2008) that uses CSS3 and give
some examples.
http://css-class.com/test/css/
Yay for rounded corners. But note that I was talking about RADICAL
differences in the original post. The difference between rounded and
pointy corners is noticeable from an æsthetic point of view, but it is
not RADICAL, and I don't see how it justifies serving up a completely
different design for browsers that don't support them.
Radical, mmm. How about creating faux columns by background-size
or source ordering by display:table. Or even using CSS like this.
div+div+div {
