All geek questions in one place

CSS if statements ... is this correct?

I am new to conditional CSS. My question is, is it correct to use it to solve cross browser issues?

For instance:

#header { [if IE 7] width: 600px; [if Webkit] width:300px; }

Editor's Note: OP most likely uses this: http://www.conditional-css.com/

+6
source share
4 answers

Use conditional statements for actual CSS files (or classes), but in html.

Like this, for example:

 <!--[if lte IE 6]> <link href="css/layoutIE6.css" rel="stylesheet" type="text/css" /> <![endif]-->

This is written in the html file, not the CSS file!

The format you posted, I think, actually does not work, and I'm sure it does not check, so it is not standard.

+6
source

It is customary to use variations of this method for IE, I believe that it has become a popular HTML5 Boilerplate [edit]:

 <!--[if lt IE 7]> <html lang="en-us" class="ie6"> <![endif]--> <!--[if IE 7]> <html lang="en-us" class="ie7"> <![endif]--> <!--[if IE 8]> <html lang="en-us" class="ie8"> <![endif]--> <!--[if gt IE 8]><!--> <html lang="en-us"> <!--<![endif]-->

Now you can customize elements without IE hacks in your main CSS files, for example:

 .ie6 .header li { /* some ie6 only styles here */ }

This is much more convenient for me than using separate style sheets, but it suffers from the very mild failure of other browsers that read (but don't apply) IE styles.

If you are having problems with Webkit, you are most likely doing something wrong. Not really, but it is very likely.

EDIT: Many browsers allow proprietary extensions that allow you to set rules that will only apply to this browser. Example:

 -moz-property {} -webkit-property {} -o-property {/* Opera */}

Please note that this does not mean that you can apply the CSS any property, you will need to see what is available.

The best link I could find quickly: http://reference.sitepoint.com/css/vendorspecific

SO editors, feel free to replace this link if there is a better link

+6
source

Regarding the validity of your statements, jackJoe received a good answer. But, this is not good practice at all. It’s better to think about how suitable the layout is, get a good layout that works with a cross browser, rather than guessing around with specific browser layouts. Instead, worry about specifics. There are certain times when you simply cannot fix the problem with IE6, and at this point you should probably apply certain code to the browser so that you do not become a headache.

In general, although this is simply not a good idea.

Side note: why are you still trying to support IE5 in the name of Tim Berners-Lee?

+1
source

No, no, you can try these

For IE 7 and 8:
width: 600px\9;
For IE10:
width:300px\0/;

For all browsers:
width: 600px;

But if you want it on all three browsers separately IE, GC, FF, then use it like this: width:300px; width: 600px\9; width:300px\0/; width:300px; width: 600px\9; width:300px\0/;
I think this is what you were looking for!

0
source

Source: https://habr.com/ru/post/888845/

More articles:


All Articles