While making CSS for the website it is painful when sometimes it works on some browsers and some don't.
I wonder if there any place I can find the existing problem which has been noted with experience developers. So I can have a list of noted problem while developing.
What are the tricks?
Where Can I find it ?
How to solve it if possible?
The most problematic browser is Internet Explorer (especially 6 and below, 7 is not so bad, and 8 is a huge step in the right direction).
Even if IE holds the majority of the market, develop for a standard compliant browser such as Firefox or Webkit (Chrome and Safari) using an XHTML doctype, then fix the discrepancies on IE at a later stage. That way you will achieve the maximum compatibility with little or no efforts (if it works in the Gecko or Webkit engine, you are pretty close to being guaranteed that it will work for most browsers [except IE, but in most cases you'll be very close to perfect]).
Most of the problems you'll run into with IE are well documented on the Internet and are rather easy to fix if your page is standard compliant.
If you develop for IE first (especially IE6) then try to make your page work with the rest of the browsers, that will be problematic as your changes will probably end up breaking IE rendering.
Also, an other thing that is important to note is that font availability and rendering is different from platform to platform. Verdana on Windows may not be smoothed the same than on a Mac, and the font might not even be present on *nix.
QuirksMode has a comprehensive list of features supported on a given browser:
Compatibility Master Table (quirksmode.org)
Personally, my biggest peeve with IE6 is its poor support for PNG-24's with transparency. It requires a filter to somewhat support it.
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.
One of my CSS rules does not show up at all in developer tools in ie8 (it works fine in normal browsers). Not even with strikethrough.
I checked the CSS file through the browser and the rule is really there
What could be going on here and how to fix this?
Why don't I drop support for ie8 altogether?
Just for those who wonder:
I recently worked for the Dutch government and they're still on Windows XP. They recently paid Microsoft for prolonging support by another year or so. They have their computers locked against installing anything (Firefox, Google Chrome) so they basically force employees to use ie8.
As we speak, some 6% of all visits to my site are by ie8. My guess is that many of those are involuntarily on ie8. Dropping support will bother them but really won't help them to upgrade to a proper browser.
IE8 might be having trouble parsing url(...)no-repeat with no whitespace separating the two values. See if adding a space there fixes the problem.
It's not clear from any spec if not having whitespace there is valid CSS; although the Jigsaw W3C CSS validator says it's valid, I don't really trust it. It's probably valid since url(...) and no-repeat are necessarily two separate tokens according to the grammar, but again, the spec does not spell this out very clearly in prose, so I can't say for sure.
I would strongly recommend having whitespace separating the shorthand values in any case.
I have just started doing webdesigning I use photoshop and dreamweaver. I have seen that professional websites carry different css for ie 6 and ie 7 and one for all others. Why? what are the different things I should keep in mind while designing for internet explorer 6 and 7 and how is it different from designing for other web browsers. Are there any other web browsers that like ie 6 or 7 which require different css ??
can you give a link where i can read more about it
basically internet explorer renders websites differently in a bad way. internet explorer 6, 7, 8 all have their little quirks. For the most part other browsers like opera, firefox and safari render sites in a similar fashion.
then main gripe is that internet explorer has a different box model. you can read about common issues with IE here:
http://css-tricks.com/482-ie-css-bugs-thatll-get-you-every-time/
http://haslayout.net/css/
there are however lots of scripts/tools that can help you out:
http://code.google.com/p/ie7-js/
http://www.findmebyip.com/litmus/#target-selector
on a side note please don't support ie6, it is by far the worst browser to work with and many companies have stopped supporting it.
I have personally stopped caring about IE6/7 and even glitches in IE8. I couldn't care less. But most of my development is either for customers who I make that clear to, or to my non-profit sports/groups that I belong to (free web dev / design).
Its just too much of a hassle to hand hold these older browsers. Thats where IE6/7 notifiers come in handy (JS that pops up and says "your browser is too old, please update").
Example site:
http://ie6update.com/
Different Style sheets for different browsers is an excellent practice but very expensive.
The main reason is because the CSS version supported by the browsers changes from Browser version to version:
http://www.thescube.com/blog/ie6-vs-ie7-vs-ie8-css-property/
For a quick diagram about what CSS features work in what browser check out http://www.quirksmode.org/. How you then beat every browser in submission is of course a different question all-together…
Similar to disabling JavaScript in browsers, is there a way to disable support for various CSS3 properties in Firefox or Chrome to quickly confirm a page is rendering OK if support for certain properties isn't there? I know it's only a presentation layer, but I'm just hoping there's a more efficient way to test against this without using old browsers, especially if Modernizr is being utilised.
A project called deCSS3 manages to disable a large majority of CSS3 properties through the use of a bookmarklet that overrides and neutralises their usage with !important rules.
A recent addition to the project is "Modernizr class toggling" for an added level of testing when Modernizr is utilised.
Even if there were a way to do so, would it help? Each browser has its own quirks, so there is no guarantee that e.g.:
Firefox - CSS3 = Older Browser
CSS3 isn't a set of additions to CSS2, it replaces CSS2. The backgrounds and borders module in CSS3 includes border and background as well as border-radius and box-shadow. If you 'turn off' CSS3 you turn off all CSS, and even if you could disable the new stuff Tom's answer is correct - that wouldn't leave you testing anything that actually exists in the real world.
If you need a way to "turn off CSS3" then I don't think you're thinking about/implementing progressive enhancement/graceful degradation properly. You should be starting with non-CSS3 stuff, then enhancing your site with it. When you build the non-CSS3 foundation and test it in your target browsers, then adding CSS3 shouldn't change anything (browsers ignore styles they don't recognize). If you sandbox your CSS3 in its own stylesheet, then you can tell old versions of IE to completely ignore it (or, if you're using stuff that's only partially supported in IE9, can tell all versions of IE to ignore it) to save a download.
That said, CSS is handled by the core rendering engine, so in order to view a page without CSS3, you have to view it in a browser that doesn't support CSS3. It sucks, it means you have to have several browsers, and even virtual machines (or physical machines) to test very well, but such is the state of web development, unfortunately. Theoretically, you should be testing in several browsers, anyway, and already know that IE6-8 have their own quirks that don't even relate to CSS3, and should already be set up to test them (so, therefore, if you need to test old versions of other browsers, you can install them in your IE test environment).
There's a useful add-on for Firefox called "User Agent Switcher" which allows you to bump your browser rendering down to an older version of IE (the iPhone rendering is also pretty useful). That should help you double check.
Firefox's Latest version
IE7
IE6
IE 8
Which browser we should use to see HTML css rendering for always and why?
Edit:
My question is not on which browsers should i test site before go live. i will try to test on all possible.
My question is which browser should i choose during layout development process and why?
because while development it's not possible to see every step in all browser it will waste time. after making a layout we can test in all but during development one browser would be better.
Uhh... every one of them?
I personally develop with Firefox 3.6 for convenience and the availability of Firebug, header sniffers and other tools. I try to test in all the browsers you mention before anything goes out for anybody to see (a client for example). But I don't think there is a real "best" choice here because in the end, you will need to test for every browser you need to support anyway.
Use the most up-to-date css compliant browser with a good debugging tool e.g. Firefox 3.6 and the Firebug plug-in.
Then check in the other browsers you want to support for your users and backwards correct any errors.
Do not attempt to make the site look EXACTLY the same in all browsers, you will be wasting your time.
As long as the effect is similar in older/other browsers (for example you could use border-radius for Firefox/WebKit browsers and this will degrade nicely for browsers that don't support border-radius) and the site is usable and fulfills it's purpose, then your ok
DONT WASTE TONS OF TIME ON IE6. Use a conditional commented stylesheet and just get it usable...
In the head of the document
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE6.css"/>
<![endif]-->
It all depends on your target user group.
If you're working for customer that uses IE6, you will have to test for it. Sad, I know.
If you're designing a site for general public, then test for current versions of major browsers. Firefox, IE, Opera, Safari and Chrome(?).
Also: develop according to standards then fix whatever does not work in one browser or another. Not that you develop for IE, then trying to fix everything that suddenly falls apart on all other browsers.
During developing NOT testing I use this combo :
firefox
firebug extension
webdeveloper extension
live http headers extension
Give it a try, you won't regret it, you can make changes to your css IN BROWSER and then change your code (No more refresh needed for that one annoying one pixel offset), check to see where is the fault interface or code logic and plenty more.(Page Speed & YSlow to analize your page speed etc.)
I whole-heartedly agree with Pekka.
I develop everything within Firefox and use the excellent addons available during development (Firebug / Web Developer Toolbar / etc).
A suggestion would be to test often in other browsers as well....I would recommend every time you go to take a little break check it out in the other browsers to see if there are any issues, and then make a note to fix them and allow your website to be rendered properly in all browsers.
You really don't want to exclude any user based on his/her browser preference, so make sure
it works across the board!
edit
Also a good point from one of the other users...IE6 is in the process of being phased out, however if you are looking to have any users in a corporate environment you don't want to exclude testing this either!
You need to test your css in all the major browsers, that includes IE (6, 7 and 8), Firefox, Chrome and even Safari and Opera.
You can probably get away with just using the latest versions of Firefox, Chrome etc. as they auto-update and so users are less likely to be using older version (though it's not unknown).
IE is a problem because so many users - particularly corporate users - are running older versions.
Choose one, it doesn't really matter which as long as it has good development tool support, to develop in and get the site looking good in that. Then test in the others. Which order you do this and how much effort you want to expend will depend totally on your target audience. From my experience Firefox with Firebug and even (dare I say it) IE8 with it's built in developer tools are good choices. The advantage here is that you'll cover the majority of users with these. However as the browser market is getting more fragmented you will need to test in others.
This is an interesting question, I'm going to assume that you have a process that means that first you develop your page and then you do cross browser testing to make sure it works everywhere - so the question then becomes which one is going to get you to the best starting point for getting to working "everywhere" (definition of which will depend somewhat on your target audience).
This used to be easy - according to my (then) staff Firefox had good standards support and the best tools - so get it right in firefox first then adapt to cope with everything else, now its a lot less clear as IE8 has a very decent set of dev tools (and is better behaved than its predecessors) and Chrome is now getting into the act - again with a good set of tools and extensions.
My gut feeling is probably Firefox, Chrome, IE8 in that order - but I'm not doing anywhere near enough CSS work to assert that that's right.
You develop in Firefox (you have firebug to adjust things), you test in safari/chrome & opera (all of them is ok with standards so you have low chances to have bugs in those) and you debug in IE. Because is impossible to have a fully functional in ALL browser from one try :D
I use my main browser (Chrome) for basic progress, and frequently check all other browsers for bugs and layout problems.
I think If we choose firefox and IE 6.0 both for website design, the site will be look almost same for all browsers, because rest of IE 6 & 7 all browsers' HTML rendering pattern is almost same. So If we make css from start considering firefox and IE 6.0, bugs would be in less numbers and In this way we can make all browser compatible website.
Please give me feedback
I do it in ie6, the most primitive browser which is still in use.
I think any thing that will work on ie6 will work on any browser.