I'm really confused about flexbox. Is this good idea to use it for modern browsers? I'v heard that I should not use it for whole page layout but I dont know why. And where is good idea to use it and where not?
I'd say no if you need Internet Explorer support.
For Edge and other browsers i'd recommend using it ... See CanIUse for supported browsers.
If you do need older browser support, rather go with some css grid framework or include lower IE specific styles using conditional includes or take a modernizr-like approach.
Plenty of crossbrowser and browser-specific solutions to your problem ... you have too choose, can't say more since this is a very broad question which can trigger various types of responses depending on people's experience and personal taste.
Related
I've been using -webkit and -moz for quite a few times now until this struck me. Aside from defining specific properties based on browsers and certain properties such as break-inside which are not widely supported,
Wouldn't
border-radius: 5px;
makes it shorter for
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
There are lots of other features which have been standardized but several examples still utilize the vendor prefixes and what are their purposes for doing so?
The former is supported by latest browsers but can we not assume almost everybody is using almost-latest browsers (especially NOT older versions of IE which certain rules apply)? (Even if people do not update their browsers, they are only left behind by just a few versions considering no one takes out a Nokia-old phone from a chest and started browsing)
Why should we use them? Why should we specify older IE specific rules or just older browser rules?
How much diving into older version would be enough? IE8?
Here are my thoughts - before going into detail I have to say that I am a freak when it comes to browser support.
Up until a couple of years back I was trying to support from IE8 and upwards. The reason behind this logic was that people where "trapped" with Windows XP and IE8 was the latest version supported by Windows XP. By trapped I mean that they were cases like government pcs that were too costly to upgrade.
After Windows 7 has matured enough and Windows XP usage dropped, I tried to support IE9 and upwards. This essentially meant that even after useful properties came out (like flexbox) it took me a long time to migrate - so I was building layouts with tables for best browser support, etc.
However, Javascript Frameworks started dropping support for older browsers (including IE9), then CSS frameworks started dropping support. If you consider it for a while, MS itself has dropped support quite some time back. Major mobile companies drop support for their 2-year devices, so why should we support older browsers? As stated in in other answers, it depends on the audience - imagine the CEO of your best client-company having a laptop with Windows XP or other outdated device - wouldn't matter if anyone else used modern browsers..
So, it came down to a point a couple of years back that you have to select between following the stream and being modern or supporting older devices. I am all up for consistency and uniformity of content, so supporting modern features for a few select browsers and dropping them for others would be a no go for me. Flexbox was one of those properties that pushed me to skip older browser support - it vastly helped me reduced markup - thus making maintenance easier. At the same time, even Bootstrap decided to drop support for older browsers, so, must upgrade to keep pace with the competition.
Needless to say, the problem isn't just IE, but was also Android which took up to v4.4 in order for the stock browser to support specific properties - vh, flexbox wrapping, etc
These said, let me give you a straight answer:
Don't bother with support for IE9 - not even 10. IE10 could be upgraded to 11 on the same OS, so it should be upgraded anyway for security reasons. IE9 is not supported by JS frameworks (eg Ember), lacks CSS3 transitions and other useful properties, like flexbox. Without these your designs would have to take many steps back if you were aiming for design consistency.
As a sidenote IE10 started supporting their own interpretation of flexbox (sorry about all this persistence with flexbox, but it's one of the most useful properties). This means, that in order to support it properly, you would have to write a lot of CSS. Imagine adding 30kb of minified CSS to support just one browser that is fairly uncommon. Is it worth it?
Some webkit browsers (like Opera) might still require vendor-specific prefixes for browser versions released 4 years ago -eg for CSS3 transforms. Tbh more important things are broken on such browsers (Opera included) that I would worry about other stuff more. Personally I only use the -webkit- prefix in select cases (eg flexbox properties that have matured quite lately).
There might be some cases where browser-specific prefixes might come handy even in modern browsers, eg styling a range input or a scrollbar where you have to mess with browser-specific properties to achieve consistency. In such cases specific CSS hacks with vendor prefixes might be required.
As a final note, I would avoid any bleeding-edge properties, eg grid; learn what it does and how it works, but don't use it just yet. You should give a look at https://caniuse.com/ in order to have an idea about CSS properties and browser support.
However, it is up to you to decide and you should make your selection based on the requirements of your project. Two years back I would tell you to support as old as you can... back then you would be able to achieve the same things with different effort, but this is not the case any more. From a point onwards... older browsers can't keep pace.
Well... This is a really big topic so its hard to answer all of it but there are best practices that you should/could follow.
First - Everything is based on YOUR SPECIFIC Audience. Look at your analytics and see what browsers are being used. The data might surprise you especially if you have US Health care or government users. Tools like Stylelint will help you find unsupported rules in your CSS.
Next, It's best practice to utilize feature detection instead of targeting specific browsers. You can implement that by using #supports in conditional code that works like a media query. This way your code is only being applied if the browser can use it. You can do similar detection in javascript using Modernizr.
Finally, I personally recommend using a CSS post processor or build script so you can stop worrying about prefixing (plus it will speed up your development with optional plugins). I tend to like a combo of PostCSS and Prefixfree (several Webpack customizations come with those included) but there are many similar options.
The main benefit is that the library tracks what needs prefixes and what doesn't so you write the non-prefixed version and the rest is taken care of.
There are no hard and fast rules but you should try to support your users' devices instead of pushing for upgrades. The nice thing about the above practices is that your resulting code will be easier to maintain, future proof and targeted to your users.
You should not worry about browsers older than IE 8. These browsers are barely used anymore and they do not support a lot of things. Please, refer to these to websites:
https://imagebox.com/industry/why-your-website-doesnt-look-the-same-in-every-browser/
http://dowebsitesneedtolookexactlythesameineverybrowser.com/.
In terms of the various border-radius commands, make sure to use them all. I've found that if you don't include webkit and mozilla, you lose a lot of traffic. In my website, I usually include every variation of a command so I know for sure my website works. Better to have a large and ugly CSS code than a broken website.
Feel free to comment on this answer if you need more clarification.
Is there a way to make sure your CSS is cross-browser capable?
I tend to work with strict doctypes, which solves a lot of problems.
Study http://www.quirksmode.org/ by Peter-Paul Koch
I refer to this site all the time.
However, as Ernest Friedman-Hill wisely pointed out, testing...
No, not absolutely sure, unfortunately. Testing, testing, and more testing is the only solution.
Here are a few tips:
Try not to use CSS3 (yet).
Don't use browser specific selectors, such as ones prefixed by -moz- or -webkit-
Use a CSS reset, like http://meyerweb.com/eric/tools/css/reset/
There are a few ways to do that.
First you will want to check on a few browsers when you are done with your website. Some good options to do that is Adobe Browser application, another is browsershots.com and you can find others.
Another great rule of thumb is to use an established framework that is already cross-browser (my favorite being 52framework at http://52framework.com ).
And honestly after years of writing CSS it seems that you will just get use to writing the best possible CSS and you will have cross-browser code of the get go.
There really is no sure way to write perfect CSS first time around (there are validators out there that can help a little, Dreamweaver has a specific tool that will validate code and CSS and let you know if its capable or not.
Good luck!
Your best option is to test in each of the browsers you want to support. If you don't have access to all the browsers there are for-pay web sites that will take screen shots of your site using different browsers:
http://browsershots.org/
Did you mean "capable" or "compatible"?
Anyway, I always use the W3C CSS Validation Service. It checks your CSS to make sure it is valid. After passing this validator, chances are your CSS is cross-browser compatible. But I would recommend also manually inspecting your CSS in different browsers. Do check out http://www.css3.info/ for details on how different browsers implement different features of CSS 3.
I would also recommend you install the Web Developer Toolbar if you're planning on doing heavy web development. Great tool for Firefox and Chrome.
I know this could boil down to a philosophical issue, so I don't mean to start a discussion on the topic. But I'm looking for the (or a couple of them) best way to resolve most issues of CSS styling in Internet Explorer 6.
I'm aware of this article on forabeautifulweb.com, and it's recommendation to just feed IE6 users a universal plain IE6 stylesheet with just some basic styling better than the browser defaults. For my application this is not the best.
I'm also aware of the concept of "fixing" IE6's CSS support via Javascript, and I'm sort of a fan of this idea. But I don't know what (if any) the best one is - I know there's several floating around in the wild. This article by Eric Meyer mentions one, but this was written almost 2 years ago, so is there a more standard script to use for this purpose now?
Can anybody point me to one or two such scripts that have been proven to be effective for updating some of IE6's handling of CSS to behave more like a modern browser?
UPDATE: to all the people answering who are trying to convince me not to use JS to fix the problem - I am plugging my ears and humming. :)
Seriously, I'm not asking whether or not to use JS for this. We've already decided we don't need to support IE6 and it is not worth the time for us to try to "debug" our stylesheets just for IE6. This decision is based on our audience and on our site stats for IE6 usage.
As far as all the comments about "what if the user doesn't have JS enabled?" Well in that case a lot of stuff on our site is not going to look right anyway, so that is somewhat of a mute point.
I've already implemented the IE7.js that Gordon suggested, and that is quite sufficient for us to get by in IE6, with very little drawback.
Thank you all just the same for your input.
You can use this library if you want to do it with JavaScript:
IE7.js is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
There is also CSS3Pie, which adds CSS3 support to browsers:
PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.
Also have a look at Progressive Enhancement and Graceful Degradation for a design philosophy.
Please don't use JavaScript to fix the problem, just add some rules to a stylesheet to fix them...
<link rel="stylesheet" type="text/css" href="normal.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
In the ie6.css, you just have rules that fudge the styles to work in IE6, you still use your normal stylesheet alongside it, so your site looks the same in IE6 and normal world.
From personal experiance, ie6 can be fixed within a few lines of CSS and a fair bit of inspecting with firebug/developers toolbar.. without the need for conditional comments.
majority of the problems I come accross are padding / margin based and it is down to me not using the best method first time round.
I also find that overflow:hidden fixes its fair share of ie6 bugs too.
i suggest, get ie6 open with the developers toolbar and try and find where the problem lies, and think of a better way to code that section.
Thats just me personally, I use conditional comments as a LAST resort.
Dean Edwards’ ie7.js script (linked by Gordon) is still the state of the art in this area.
As to what’s the best approach, it depends. Dean Edwards’ script fixes a lot of IE CSS bugs, and allows you to use selectors like the multiple class selector and the child selector that aren’t supported at all in IE 6.
If you’re happy that the IE 6 users in your target audience tend to have JavaScript turned on, a library like Dean’s can save you a bunch of time, and allow you to trim down your code by using the selectors that IE 6 doesn’t support.
However, you’ll likely still need an IE 6 stylesheet to deal with issues that Dean’s library doesn’t fix.
The best solution may be to wait for Microsoft to stop supporting IE 6 (like they did with Mac IE 5), because if Microsoft don’t support it, it’s hardly fair for people to expect you to. We‘re currently hoping for 2014 on that score.
Generally, you don't need javascript. You can use plain old CSS. It helps to have a good knowledge of hasLayout though.
More often than not, you can fix IE6 and 7's issues by giving the problem element layout. To do that, give it a fixed height or width, or use the proprietary zoom.
My favoured method of targeting specific versions of IE browser is to use conditional comments to add a <div> as a direct child of <body> which lets me know which version of IE I'm in (like so). That way, I can target IE6 directly:
.IE6 div.fubar {
zoom: 1;
}
The other thing to remember is that it's almost impossible to achieve pixel parity across IE6/7/8/Firefox/Safari/Chrome/Opera, so if some things don't look quite right in a browser that's nearly ten years old, you don't always need to worry about it.
Position is everything has some useful tips on IE bugs, too.
Don't use javascript if you can avoid it - you are not guaranteed that your users have JS activated (as already mentioned) and you actually don't need it.
To get rid of many problems of different interpretations from browsers (not just IE) user a css-reset stylesheet. There are many floating around.
Even better yet, use a CSS framework which will remove many many problems between different browsers and will come with many helpful classes to solve standard issues.
I for one love YAML (http://www.yaml.de/en/home.html), then there's Blueprint (http://www.blueprintcss.org/) and probably a few others. Believe me - once you used a CSS Framework you will never want to go back.
jQuery and its plugins work best for IE6 issues. Give it a try!
Should we use IE's CSS Dynamic properties?
I read IE8+ would not support these.
What is the best strategy to handle this?
If you mean CSS expressions, you should avoid them because they're slow.
Your question about how to avoid them is pretty vague. It would be easier to answer a more specific question. But here's a vague answer: Javascript. :)
They are very useful to solve incompatibility problems with older versions of IE, for example to get png transparency in IE6. I always (when needed...) include style-sheets using these functionalities in IE's conditional comments.
The dynamic properties wasn't anything that really took off. It could be used in applications that targeted IE only (i.e. intranets and such), but as it never became a standard and no other browser supports it, it never came into wide use on the web.
I haven't read what you say about IE8 not supporting dynamic properties, and I haven't tried it, but it sounds very plausible that the will not be supported when the browser renders a page in standards compliant mode. They will probably be supported in quirks mode for a few versions longer.
I am trying to figure out the most efficient way to ensure cross-browser compatibility. I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number. Is there a way to make a CSS work for any browser or is it better to just develop multiple CSS and add code to choose which to use based on the browser being used?
You might consider using a CSS Framework such as Blueprint. It includes a CSS reset that should help.
Also, you might want to look at Yahoo's CSS reset
An aside to clarify a point:
... I have done a bit of research and learned a few interesting things such as the fact that Mozilla/Firefox can't handle a class that has a name starting with a number....
Sorry, but that's not a Mozilla limitation, it's in the CSS spec: class names must not start with a number. Any browser that allows them to isn't enforcing the rules properly.
Answered here on StackOverFlow. The relevant part of the spec is at http://www.w3.org/TR/CSS21/syndata.html#characters (see the 2nd paragraph).
To answer your question: There is no way to make a page using just one universal css and have it displayed equally in all browsers, unless you only use an extremely small sub-set of all available css (selectors, values, etc.).
The way I work is:
Use a css reset
Develop for a browser that adheres to the standards pretty well (Firefox, Chrome, Safari, Opera)
Patch things up for IE using conditional comments (because you'll probably need things that don't validate)
A good starting point would be to use CSS reset such as: http://developer.yahoo.com/yui/reset/
Your goal should be CSS that works on all browsers. If you start out with a CSS file per browser, where do you stop? Mobile Safari? Flock? Konqueror? Every version of every supported browser?
Eventually, you might need to compromise, but you can cross that road when you get there.
Regardless of your infrastructure/framework/etc you should test your code on all major browsers. If possible avoid using style sheets for browser specific problems. Browsers will change and adapt which means you might get stuck having to update a bunch of websites when new browsers come out.
CSS is a fickle beast and I haven't found any solution that covers all the quirks except for a lot of due-diligence and testing.
You might use a framework that does this for you, such as GWT, but keep in mind that you will still have some issues.