Re: [css-d] css validation help

[David Laakso]

Alan Gresley wrote:
>
>  I 
> have been influenced by Georg and his masterpiece.
>
> http://www.gunlaug.no/contents/wd_1_02_01.html
>
>
>
>   



Indeed. Interesting fellow, Georg: On feeding styles to Redmond...

(works for me)









__
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] css validation help

[Alan Gresley]

Philippe Wittenbergh wrote:
> 
> Just 2 notes on this:
> 
> On Jul 17, 2009, at 3:29 PM, Alan Gresley wrote:
> 
>> I would not recommend
>> hacking your HTML with IE Conditional comments since they are not in one
>> location and thus not easily removed.
> 
> 
> 1. If your website is larger than 3 pages and reuses the same 
> stylesheets, I hope you use server-side templates :-). From the humble 
> (yet quite powerful) SSI to PHP, ASP or other name-you-favourite server 
> side language, an include to load your block of  ...>  with CC's in it.


Hello Philippe,

Yes I do use server side includes which I would place CC comments in if 
needed. This I do not frown on since it's centralized.

I only state this issue about CC because coders who are new to this list 
may pollute their non server-side templates or standard HTML with CC on 
the advice that CC are ok to use. The whole  element or elements 
within the  element can be server-side templates.


> No need for support for IE anymore? Just remove a couple of lines out of 
> that include, upload done. Let the server do the rest of the job.
> 
> 2. multiple @imports and nested constructs:
> 
> On Jul 18, 2009, at 12:31 AM, Alan Gresley wrote:
> 
>> My regular CSS,
>>
>> 
> 
> You do know that such constructs are detrimental to performance and page 
> load, esp. in IE, do you?


Internet Explorer is a detriment to the progress (interoperability) of 
the of the Internet or Intranet. Surely this list isn't here just to 
nurse *that browser* along.

Is the detriment to performance balanced by the lessor code that is is 
in the CSS and HTML. Yes the CSS is targeting many elements at once but 
the matching of this against ids' or classes in the HTML is not needed.

> Fex:
> http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
> take this with a grain of salt, but I did some similar tests with IE 
> running on an older machine, and multiple @imports do slow down things.
> 
> My 2¥,
> 
> Philippe
> ---
> Philippe Wittenbergh
> http://l-c-n.com/


I accept your point of view Philippe. I do like to help others with IE7 
at least. But I see that the continue focus of a legacy does hold back 
where CSS can go. I not saying that my method is a good way, just that 
it is an option. My used of @imports is just to support IE7 or lower. I 
have been influenced by Georg and his masterpiece.

http://www.gunlaug.no/contents/wd_1_02_01.html


I just see no point in compromising ones code just to fit in with IE 
bugs and legacy behavior.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] css validation help

[Alan Gresley]

david wrote:
> Alan Gresley wrote:
[...]
>> Hello Erik,
>>
>> This is still hacking HTML for IE7 or lower due to lack of support for 
>> CSS2.1. My CSS and hacks are *centralized* as oppose to being 
>> *decentralized* in the HTML. They can be removed in a flash.
> 
> All your conditional comment (in the HTML) needs to contain is a style 
> link pulling in whatever stylesheet you want to feed IE. Then your CSS 
> is not in the HTML, just the stylesheet an IE browser pulls in when it 
> processes your conditional comment.


This is what I do anyway by this.

@import test-ie; /* For IE/Win */

All other browsers (non IE7 or lower) will skip that import since it is 
invalid.

All comments  are downloaded by every browser. Even if the code 
is a server side template, each and every page visited by a browser has 
to download such possible code.




Though with my CSS file with IE @import, all browser have the CSS 
already cached so is only downloaded once. If I wrong in this, please 
point out my error.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] css validation help

[Brian Hazelton]

Philippe Wittenbergh wrote:
> Just 2 notes on this:
>
> On Jul 17, 2009, at 3:29 PM, Alan Gresley wrote:
>
>   
>> I would not recommend
>> hacking your HTML with IE Conditional comments since they are not in  
>> one
>> location and thus not easily removed.
>> 
>
>
> 1. If your website is larger than 3 pages and reuses the same  
> stylesheets, I hope you use server-side templates :-). From the humble  
> (yet quite powerful) SSI to PHP, ASP or other name-you-favourite  
> server side language, an include to load your block of  rel="stylesheet" ...>  with CC's in it.
>
> No need for support for IE anymore? Just remove a couple of lines out  
> of that include, upload done. Let the server do the rest of the job.
>
> 2. multiple @imports and nested constructs:
>
> On Jul 18, 2009, at 12:31 AM, Alan Gresley wrote:
>
>   
>> My regular CSS,
>>
>> 
>> 
>
> You do know that such constructs are detrimental to performance and  
> page load, esp. in IE, do you?
> Fex:
> http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
> take this with a grain of salt, but I did some similar tests with IE  
> running on an older machine, and multiple @imports do slow down things.
>
> My 2¥,
>
> 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/
>
>   
This page discusses using php to load stylesheets 
automatically.http://www.veridian-systems.com/blog/blogs/blog5.php/2009/07/17/php-site-maintenance
__
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] css validation help

[Philippe Wittenbergh]

Just 2 notes on this:

On Jul 17, 2009, at 3:29 PM, Alan Gresley wrote:

> I would not recommend
> hacking your HTML with IE Conditional comments since they are not in  
> one
> location and thus not easily removed.


1. If your website is larger than 3 pages and reuses the same  
stylesheets, I hope you use server-side templates :-). From the humble  
(yet quite powerful) SSI to PHP, ASP or other name-you-favourite  
server side language, an include to load your block of   with CC's in it.

No need for support for IE anymore? Just remove a couple of lines out  
of that include, upload done. Let the server do the rest of the job.

2. multiple @imports and nested constructs:

On Jul 18, 2009, at 12:31 AM, Alan Gresley wrote:

> My regular CSS,
>
> 

You do know that such constructs are detrimental to performance and  
page load, esp. in IE, do you?
Fex:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
take this with a grain of salt, but I did some similar tests with IE  
running on an older machine, and multiple @imports do slow down things.

My 2¥,

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] css validation help

[david]

Alan Gresley wrote:
> Erik Vorhes wrote:
>> On Fri, Jul 17, 2009 at 1:29 AM, Alan Gresley wrote:
>>> The best way is to only hack IE7 or lower since all modern browsers
>>> (including IE8) should render a page the same way. I would not recommend
>>> hacking your HTML with IE Conditional comments since they are not in one
>>> location and thus not easily removed.
>>>
>> Alan,
>>
>> Decentralization of CSS may sometimes pose an issue, but using
>> conditional comments for IE isn't actually a hack. It's using a
>> proprietary Microsoft extension; every other browser simply treats
>> conditional comments as regular comments. The additional benefit of
>> conditional comments is that you can use other proprietary Microsoft
>> CSS extensions (e.g., "zoom" and various JScript expressions) within
>> them without causing your code to invalidate.
> 
> Hello Erik,
> 
> This is still hacking HTML for IE7 or lower due to lack of support for 
> CSS2.1. My CSS and hacks are *centralized* as oppose to being 
> *decentralized* in the HTML. They can be removed in a flash.

All your conditional comment (in the HTML) needs to contain is a style 
link pulling in whatever stylesheet you want to feed IE. Then your CSS 
is not in the HTML, just the stylesheet an IE browser pulls in when it 
processes your conditional comment.

-- 
David
gn...@hawaii.rr.com
authenticity, honesty, community
__
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] css validation help

[Alan Gresley]

Erik Vorhes wrote:
> On Fri, Jul 17, 2009 at 1:29 AM, Alan Gresley wrote:
>> The best way is to only hack IE7 or lower since all modern browsers
>> (including IE8) should render a page the same way. I would not recommend
>> hacking your HTML with IE Conditional comments since they are not in one
>> location and thus not easily removed.
>>
> 
> Alan,
> 
> Decentralization of CSS may sometimes pose an issue, but using
> conditional comments for IE isn't actually a hack. It's using a
> proprietary Microsoft extension; every other browser simply treats
> conditional comments as regular comments. The additional benefit of
> conditional comments is that you can use other proprietary Microsoft
> CSS extensions (e.g., "zoom" and various JScript expressions) within
> them without causing your code to invalidate.

Hello Erik,

This is still hacking HTML for IE7 or lower due to lack of support for 
CSS2.1. My CSS and hacks are *centralized* as oppose to being 
*decentralized* in the HTML. They can be removed in a flash.


> I'd actually argue that if your conditional IE 6-7 CSS files are so
> big as to be unmaintainable, it's probably time to revisit how you're
> doing your CSS to begin with.
> 
> Erik


This is how I now serve IE7 or below my special CSS.





My regular CSS,




and IE7 fixes. Yes there were IE8 beta fixes to.




My CSS is never unmaintainable, but rather a bit to nasty for the 
browsers to handle. CSS could be much more simpler with much lest ids' 
and classes' in the HTML code and the use of sibling, structural pseudo 
   and attribute selectors.




These selectors and minimal use of ids' and classes' in the HTML is 
demo'd here.




This demo holds quite well together in IE7. It even looks better in 
IE5/Mac than it does in IE6. I not here to support IE6 or any other 
antiquated browsers. My CSS is hopefully a glimpse into the future.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] css validation help

[Erik Vorhes]

On Fri, Jul 17, 2009 at 1:29 AM, Alan Gresley wrote:
>
> The best way is to only hack IE7 or lower since all modern browsers
> (including IE8) should render a page the same way. I would not recommend
> hacking your HTML with IE Conditional comments since they are not in one
> location and thus not easily removed.
>

Alan,

Decentralization of CSS may sometimes pose an issue, but using
conditional comments for IE isn't actually a hack. It's using a
proprietary Microsoft extension; every other browser simply treats
conditional comments as regular comments. The additional benefit of
conditional comments is that you can use other proprietary Microsoft
CSS extensions (e.g., "zoom" and various JScript expressions) within
them without causing your code to invalidate.

I'd actually argue that if your conditional IE 6-7 CSS files are so
big as to be unmaintainable, it's probably time to revisit how you're
doing your CSS to begin with.

Erik
__
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] css validation help

[Alan Gresley]

Vincent Pollard wrote:
> Hi everybody,
> 
> So my css and xhtml almost validate, except for two things:
> 
>  
> 
> 1)  The third line here validates in CSS3 but not in CSS2.1 - 
> 
> a) does that matter? 

Erik Vorhes has already stated that it doesn't matter.


> b) the overflow-y is the only way I've found to stop the page jumping
> around in IE8. Maybe somebody else has a better solution?
> 
> html { 
> 
>   /* forces scrollbar visible to prevent position jumping in Firefox
> */
> 
> height: 100%; 
> 
> margin-bottom: 1px;
> 
>   overflow-y: scroll /* forces scrollbar visible to prevent position
> jumping in IE8 */
> 
> }


We would need to see a test case here. It may be IE8 following CSS2.1 to 
  the letter or handling invalid XHTML differently. Get your XHTML valid.


> My style rules for IE6 using the underscore hack, e.g.: 
> 
> ..threeColLeft {
> 
>   _display: inline;
> }
> 
> I didn't really want to create a separate stylesheet for IE6 but maybe I
> should if I want validation. What would you do?


Replace the above with,


* html .threeColLeft {
   display: inline;
}


This is valid but should never select anything but IE6 or lower have an 
element outside the . Chris Wilson of MS was the one who coded it 
in trident (IE rendering engine) in the 1990s.


> Any help,  advice, comments or suggestions - and please no abuse about
> using hacks in the first place - would be gratefully received.


Hack the older browsers by CSS that no browser should use. The above 
works in IE6. This one works in IE7.

*+html .threeColLeft {
   display: inline;
}


This bug or whatever is not present in IE8.

Never use unsupported selectors to target specific browsers. This one I 
used with Safari 3 to target it.

*:not(:root)~html #wrapper2+div[id*=""]:not(:first-child)>*


Now Safari 4 does not honor empty attribute substring selectors like 
it's cousin Firefox. All such hacks will eventually fail as browsers 
support of CSS improves or if other implementors change course.

The best way is to only hack IE7 or lower since all modern browsers 
(including IE8) should render a page the same way. I would not recommend 
hacking your HTML with IE Conditional comments since they are not in one 
location and thus not easily removed.


> P.S. what really are the advantages of being compliant? I hear it's
> better for SEO and I like the idea, just from a professional pride POV
> but why be compliant. Do a couple of underscore hacks pose a problem?


This has no affect with SEO (which is off-topic here). The underscore 
hack just invalidates the CSS.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
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] css validation help

[Erik Vorhes]

On Thu, Jul 16, 2009 at 1:42 PM, Vincent Pollard wrote:
>
> 1)      The third line here validates in CSS3 but not in CSS2.1 -
>
> a) does that matter?
>

Not really, since you're doing it intentionally, and you'd run into
that issue with anything that's valid in CSS3 but not in CSS2.1.

>
> I didn't really want to create a separate stylesheet for IE6 but maybe I
> should if I want validation. What would you do?
>

I usually end up making IE-version specific files & wrap them in
conditional comments. That way you don't need to rely on a hack to get
see you through. (Though I have to admit that I'll throw hacks in my
main CSS files during development, if I can, to keep things grouped
together for easier revision.)

> P.S. what really are the advantages of being compliant? I hear it's
> better for SEO and I like the idea, just from a professional pride POV
> but why be compliant. Do a couple of underscore hacks pose a problem?

Well-formed HTML can play a significant role in how your pages are
parsed & indexed by search engines (as well as some assistive
technologies), but CSS validation doesn't play a role in that way.
Validating your CSS helps to preempt real mistakes, etc. The validator
has saved me from a forgotten semicolon several more times than I'd
like to admit.


Erik
__
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] css validation help

[Vincent Pollard]

Hi everybody,

So my css and xhtml almost validate, except for two things:

 

1)  The third line here validates in CSS3 but not in CSS2.1 - 

a) does that matter? 

b) the overflow-y is the only way I've found to stop the page jumping
around in IE8. Maybe somebody else has a better solution?

 

html { 

  /* forces scrollbar visible to prevent position jumping in Firefox
*/

height: 100%; 

margin-bottom: 1px;

  overflow-y: scroll /* forces scrollbar visible to prevent position
jumping in IE8 */

}

 

My style rules for IE6 using the underscore hack, e.g.: 

 

..threeColLeft {

  _display: inline;

}

 

I didn't really want to create a separate stylesheet for IE6 but maybe I
should if I want validation. What would you do?

 

Any help,  advice, comments or suggestions - and please no abuse about
using hacks in the first place - would be gratefully received.

 

P.S. what really are the advantages of being compliant? I hear it's
better for SEO and I like the idea, just from a professional pride POV
but why be compliant. Do a couple of underscore hacks pose a problem?

 

Vincent Pollard | UI Developer | Version 5.1 Inc. | T. (416) 516-4509
x252 | F. (416) 516-6186 |  vinc...@version51.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/