I'm trying to figure out which browsers currently (natively) support the CSS3 layout module.
Basically, I'm developing for a specific environment where I can specify what browsers to use, and CSS3 will speed up development times, so hey - why not?
What I'm specifically talking about is
body {
display: 'aaa'
'bcd';
}
and being able to slot page elements into the layout like so:
div#div1 { position: a; }
div#div2 { position: b; }
(div1 is the header, and div2 is a left sidebar)
Opera has the best CSS3 support, followed by webkit (safari). I suggest testing on Opera to see what works.
Here's a compatibility chart (may be out of date)
http://geocities.com/seanmhall2003/css3/compat.html
this one seems better: http://westciv.com/iphonetests/
Be aware that most css3 properties are supported through a prefix (since css3 isn't final). For opera the prefix is -o- and for webkit it is -webkit-. ie: -o-text-shadow.
UPDATE: There is a Javascript implementation of the layout module: http://a.deveria.com/csstpl/ . Have not used it myself and it comes with the catch that you must wait for all the page to load before it can render cleanly. If you're writing an intranet application on a LAN this would probably have a negligible impact but on a slow connection that could make your pages appear unresponsive.
I'm pretty sure no browsers currently implement it. And I wouldn't expect any browser to implement it any time soon either.
It just isn't mature enough yet. It's only a working draft and will still need a lot of attention and discussion before it's going to turn into anything browser implementors will start having a go at. For example, there are (at least) 2 related proposals: Grid Positioning and Matrix Layout.
It is on Mozilla's bug tracker, but for the moment that's little more than a placeholder for future attention. I couldn't find any mention of it at all on the Webkit bug tracker.
If you want to find out more about the ongoing status of these layout modules, you should follow the www-style mailing list.
Related
Recently, I have been building a website for someone and am getting irritated with some browsers rendering the website one way and other browsers rendering another way. I decided to look into why this is and discovered that the issue likely lies in the HTML engine beneath the browsers. For example, Chrome and Opera (along with most, if not all, Chromium browsers) use the Blink engine, which is a fork of the WebKit engine (which descended from the KHTML engine). Safari uses WebKit. Internet Explorer uses the Trident browser; and Edge uses the fork of Trident known as EdgeHTML. Netscape and FireFox use (or used, in Netscape's case, considering the browser is discontinued) the Gecko engine.
Considering all of this, is it possible to apply CSS to specific engines rather than browsers? Or is this already being done when we try to use browser-specific CSS? Was the point of the user agent string to do this (which apparently was messed up by the developers wanting to imitate other browsers)?
Note, I would think from comparing how these engines are related that there are 3 main engines: KHTML-based, Trident-based, and Gecko. So I am guessing that the answers on this question will give at least three different methods (one for each of the main engines).
Even if it was possible (using vendor prefixes) it could be a pain to maintain the code base. I suggest you to reset or normalize.
My reset is a merging of reset and normalize.
You can use vendor prefixes, even target some of them via suppot queries with vendor prefixes, such as
#supports (-webkit-appearance:none) {}
Browserhacks has a great collection of approaches for that.
That being said, you really, really shouldn't. It will be a nightmare to maintain.
Browser differences are caused by:
1) Different user-agent styles (default browser rules); Normalise or reset will take care of that for you.
2) Some experimental features that might be available just to some browser, or be different between them, normally addressed by vender prefixes; Autoprefixer such as Prefix Free or Post CSS's Autoprefixer deal with that perfectly fine.
3) Different features; knowing what you can and can't do on each will take you a long way, and whenever you find a limitation, make sure to use fallbacks or even polyfills.
99.999% can be achieved with normalise, an autoprefixer, and a decent understanding of browser features and fallbacks.
Remember your projects should work fine on all browsers (or as many as you can, no one expects to support IE6 on 2018..) but it can look and have a better experience on some / most. That's what progressive enhancement and graceful degradation are for.
Please check out this snippet of my site.
http://jsfiddle.net/TmnPV/
The logo is made up of the 'circle1' and other div tags in the same html sections. It doesn't show up on jsfiddle either and it looks different on every browser.
On chrome = shows all
On firefox = no logo shows and bottom text under input field is larger
On safari = no logo shows
What can I do?
This is called, umm... , welcome to wild wild world of web. Every browser vendor parses html/css/javascript differently. Some are lenient, some are strict. (Chrome Vs. Opera). Some have different Box model, some have standard operational behavior, some tend to do their own thing.(Opera Vs. IE6)
Answer to different renderings : You have to hunt down each and every little quirk. One by one.
Welcome.
You'll need to adjust your styles for older browsers if you plan on doing alot of css3 transforms.
IE 6, 7, and 8 just don't have the ability to read those styles.
Even on Firefox, depending on the version, you'll run into various spacing issues since the rendering engine is different than Chrome (and Safari).
For using html5 and css3 in older IEs you can (sparingly) use polyfills, which duplicate the effect using javascript. You can see a list of available polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
Quirksmode is a great resource for checking compatibility: http://www.quirksmode.org/compatibility.html
I would highly recommend the Firebug add-on for Firefox to see where the extra spacing, etc is happening.
When you run into a specific issue with a specific browser that you can't figure out post a question here. It's much easier to help with one bug than just general browser problems.
That's mostly because you are using code to work with one browser. Different browser uses different code renderer. It's hard to make everything look the same, even tho Internet explorer is the worst, other browsers have different features. Opera has most of the HTML5 form features, that no other browser supports so far, but Chrome and Firefox supports the most of the HTML5 attributes. Hope this helps understand the reason why.
I want to use css3 features like
box-shadow
so for that
Do i need to include some special tag for css3 at top of page
which browsers currently support it
what will happen if use many css3 features and people view in old brosers.cause any error or so
Should i really use it or not
Do i need to include some special tag for css3 at top of page
No
which browsers currently support it
Most browsers support some CSS 3. No browser supports all CSS 3. When can I use tracks when support for various features was added.
what will happen if use many css3 features and people view in old brosers.cause any error or so
Unless the browser is exceptionally buggy, the error handling rules of CSS will apply and the unrecognised thing will be ignored.
This is only a problem if another style (which does apply) will render content unreadable unless the unsupported style is also applied. This probably can sometimes be worked around by applying the same property twice. First with widely supported values, then with less widely supported ones: e.g.:
color: white;
background: url(blue_0.5_pixel.png);
background: rgba(0%, 0%, 100%, 0.5);
Should i really use it or not
That needs to be determined on a case-by-case basis.
You use css3 just like regular css - no special declarations necessary. The only thing to keep in mind is that there are browser-prefix versions of many css3 styles that you'll want to use and while most of them use the style rules in exactly the same way, there are a few that have slightly different syntax (some older versions of Chrome, for example, use different gradient syntax.) When you do use the browser-prefix versions, always use the non-prefixed version as well following the prefixed versions. For example:
div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Updated Answer: If you're googling this some additional info might be helpful because CSS can be very confusing on how to get started.
CSS3 Doesn't really exist, per se: By that I mean that there is no Formal CSS3 Standard ( per MDN ).There was a CSS, then CSS2, which were "releases" or "recommendations" by themselves. CSS3 is really a set of modules that independently progress in development and browsers adopt the modules and the changes at different rates and it is evolving more "organically".
There is nothing to install or "add-on". Its all built into the various browsers ( some more than others ).
What this means is that using "CSS3" requires a lot of study and testing on one's own site(s) to figure out what is acceptable in your own use cases. As has been stated, it may ( or will most assuredly ) be necessary to have workarounds and multiple styles that will default depending on the browser in use by the user.
How do I know?:
If you are new to CSS my recommendation is to develop for a single browser at first to learn CSS ( personally, I tend to dev to the latest versions of Chrome as my personal standard, but this does change for me. I used to dev to FireFox ). Then go back and adapt it to other browsers by testing and seeing where it has issues.
How Old to Adapt to:
Also, you will want to identify how far back in browser versions you are willing to "adapt" your sites, ie: maybe stopping at IE 11, Chrome 49, Safari 5 as well as mobile versions, etc. This can be researched here to see which browser versions still have enough current user base to bother with. Once your site(s) are up and running browser usage can be tracked to get a better idea of your own user base's browser versions and adapt accordingly.
If you detect a user with a browser version that may not work well a dialog can be shown to let them know which minimum browser version is best on that site.
Testing Browser Compatibility:
Personally, I use https://crossbrowsertesting.com to test different browsers and versions. It has different browsers and operating systems that can be selected including mobile devices.
Its also a good idea to constantly check the compatibility tables in the documentation as those change on a regular basis.
Library:
As you continue to develop with CSS you should build up a library of how you prefer to do things and keep that updated as CSS and browsers change.
Avoid the "Bleeding Edge" Versions:
Its usually best to avoid the absolutely latest versions of CSS as the current browsers will tend to lag way behind as well as the legacy browsers that are still out there.
Enterprise or In-House:
If you are developing for "Enterprise" or "In-house" only web based apps then you have a lot more freedom to use the "latest and greatest" as you may have more control over which browser versions "must" be used and even whether or not you develop for certain browsers. I've had instances where we only developed to a single browser and version and the users had to be on that version, which can be better controlled in an organization like that of course.
I am trying to make my own website and it was coming along quite nicely. It looked beautiful in Firefox when opened and worked wonderfully. But then I run it in any other browser and it does not work. How can I fix this? Interner Explorer especially hates it =[
You just got to see it to know what I'm talking about so here is the link:
http://opentech.durhamcollege.ca/~intn2201/brittains/chatter/
Please give solutions that don't involve JavaScript.
Rendering differences between Firefox and Internet Explorer are really the daily trade of everyone who designs web pages.
You should start identifying which elements exactly cause the problem(s) and then formulate a question regarding exactly that. (or do a Google search, all those incompatibilities and how to fix them are documented somewhere on the net in some form.)
Also, I'd recommend you download a Tool like IETester and check out which versions of IE the site fails in. It looks pretty OK in IE8, but the inline frame looks bad in 7.
Then, really make sure your page is valid. (It probably shouldn't be XHTML, but have a HTML doctype.) This is not to conform with some rules, but because validation catches an awful lot of errors like unclosed tags that screw up the rendering. This isn't the case in your case right now, but still I'd recommend doing it.
On the long run, these tools are going to be very helpful:
Firebug in Firefox (Right-click any element on your page and choose "Inspect element..." it gives you heaps of useful information
The Web Developer Toolbar in IE8 (press F12 to open it) that is similar to, if not as powerful, as Firebug.
OK, I had a look at the page in IE6.
Some tips.
Try to avoid tables for layout. I admit that putting the fancy border around the "welcome" area, is much easier using a table than any other way, but the other tables are completely unnecessary, and the cause of your much of your problems, because browsers, particularly IE6 and IE7 like to do their own thing when deciding how to lay them out.
As bobince says, table-layout:fixed on the signupTable1 will help a lot
Also, for IE6, giving the td containing "welcome" a height of 100% helps.
The margin widths of the items in the cells in the signupTable1 are percentages of the cell width in FF, but percentages of the screen width in IE6. You should add some IE6 targeted css to compensate for this.
Finally, as far as I can see, your markup is immaculate polyglot HTML/XHTML and serving it as text/html and using an XHTML doctype should not cause any problems.
Your page declares an XHTML doctype, yet it is not valid XHTML:
http://validator.w3.org/check?uri=http%3A%2F%2Fopentech.durhamcollege.ca%2F~intn2201%2Fbrittains%2Fchatter%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Furthermore, it's returned with a content-type header "text/html", which is wrong for something that's supposed to be XHTML. Unfortunately, the correct content type will not work either.
So there are two things you have to do:
Don't use XHTML
Make your HTML validate
Then you can start thinking about actual browser incompatibilities.
It looks the same in Firefox 3.6.2 as in Internet Explorer 8. However the old browsers are the evil ones:
search the web for Internet Explorer + margin, because thats where Internet Explorer fails.
Simple trick: do not use margin.
position:absolute;
top: 80%
left: 100px;
And then... google for specific stuff :)
Ok I fixed 2 errors finally figured them out
changed
#loginForm {
float: right;
}
#loginTable {
margin: 20%;
margin-top: 14%;
}
to
#loginForm {
float: right;
margin-right: 5%;
margin-top: 2.5%;
}
#loginTable {
}
and added
<!--[if lte IE 7]>
<style type = "text/css">
#loginForm{margin-top:-157px}
</style>
<![endif]-->
not a solution I like but one I will have to deal with.
Ok still leaves the issue of I hear there is a 100% height problem and my horizontal borders wont stay the correct width.
First, make both your HTML and CSS to validate:
HTML validator: http://validator.w3.org/
CSS validator: http://jigsaw.w3.org/css-validator/
Then, if your valid code still fails in particular browser, find the problematic HTML element using the browser's debugging / inspection tools:
Safari / Chrome: built-in Inspector
Firefox: separate plugin, among the best is Firebug
IE8: built-in Developer Tools
IE6/7: must be downloaded and installed from Microsoft
Opera: built-in Developer Tools
As long as you use valid CSS 2.1, differences between modern browsers should be minimal or almost non-existent. Yes, modern browsers do very good job in implementing standards, especially if you avoid bleeding-edge not-yet-fully-standardized techniques (CSS3, HTML5). (We are forgiving and count IE8 as "modern" here despite its CSS 2.1-only support, PNG issues, slow JS speed, etc.)
Oh, one thing not related to validness: always remember that many UI elements (fonts, buttons, etc.) are not rendered in exactly equal sizes in different browsers / platforms. Also screen sizes may vary largely due to popularity of mobile browsing. That's why you should prefer elastic / fluid layouts and not rely on pixel-perfect rendering.
Most IE 6/7 bugs are the same old common ones repeating and there are plenty of resources about fixing them. Create separated stylesheet(s) for IE(s) and include them by using conditional comments.
As a final comment, as long as open standards / technologies are used, personally I couldn't care less supporting a decade old browser, except in form of graceful degration, unless I'm paid generously for that. Browsers are free to upgrade, there are no reasons not to do that. No excuses. World is not static, show must go on, you won't see HD with your old tube telly, etc.
I also think it's our responsibility as web developers to force the big masses to adopt new (open) technologies, because they save huge amount of our time, makes possible to create better end-user experience, etc., the list of benefits is endless. Again comparison to other industry: consumer electronics companies keep pushing out new things, although most people would happily use 20 years old tech unless forced to upgrade their (naturally conservative) mindsets.
The messed-up borders around the ‘welcome’ box and the wonky centering is because you're using ‘auto layout’ tables for page layout. This leaves you at the mercy of the auto table layout algorithm, which is complicated, unreliable, and a bit broken in IE.
For places where you must use tables for anything more complicated than simple data, set table-layout: fixed on the <table> and add explicit width styles on either the first row of <td>s, or on <col/> elements just inside the table. Columns you leave without a width style will share the remaining spare width between them. Set an explicit height on the rows containing fixed size images to stop them sharing the table height.
However, for the main page layout here you would be much better off using CSS positioning or floats rather than tables. You can use nested divs (each with a separate background image) to achieve the image border effect without resorting to tables.
If I were you, I would not bust my guts trying to make the site work for ancient browsers like IE 6.
Indeed, one could argue that you would be doing the world a favor if you made your site refuse to work with IE6. Anything that can help to push IE6 into the grave is a good thing.
If Google can say that IE6 is no longer supported ... so can you.
Now if you were building this site as a money-making exercise, and demographic included a significant percentage of IE6 users, maybe the pain of supporting ancient non-standards-compliant browsers would be worth it. But otherwise, I'd say it is not.
I'd like to start using HTML5's basic features, but at the same time, keep my code backwards compatible with older browsers (graceful degradation). For instance, I'd like to use the cool CSS3 properties for making rounded corners. Is there any available tutorial for writing gracefully degradable HTML5 ?
Additionally, what browsers should I support so that my app. is functional for at least 95% of visitors? What are the ways to test those browsers painlessly ?
When talking about HTML5 or CSS3, you should head over to:
When can I use...
As can be seen, we are still far far away from using that.
Also, since old versions of the browsers won't support HTML5 or CSS3, however, you can do what is known as:
Progressive Enhancement and Graceful Degradation
Here are some resources also:
Gallery of HTML5 Sites (You can learn and get the idea from them)
Create modern Web sites using HTML5 and CSS3
Browsers that, collectively, cover 95% of the world: Firefox, Chrome, IE6/7/8.
The best way to test them is to install them on your computer.
You want to use html tags and css compatible with mobile browsers.
For anything CSS3 wrap it in conditional javascript. I always make sure the device width is atleast 240px, then anything below that is the old, crappy, mobile look.
You can use a small mobile boilerplate for CSS, to reset the basic tags you use (make them look them same in different browsers). As with any boilerplate, you should look at the css to see if it's WAY overkill.
For a comprehensive guide check out the W3 Mobile CSS2 guidelines: http://www.w3.org/TR/2000/WD-css-mobile-20001013
Another good resource is this compatibility table: http://www.quirksmode.org/m/css.html
Graceful Degradation is all about making compromises -- if you could do everything in the lower version, you probably would. To pick on the example of rounded corners you cite, it may acceptable to you (or your client) to live without them, where there don't exist renderer specific CSS extensions to support them (this is how http://www.ipswich-angle.com/ handles it, for example, I believe). Other options involving images are there, but it is largely dependant on what compromises you and your client are willing to make.
A service like browsershots.org is quite useful to check how your site renders on different browsers and operating systems. You have to wait in a queue for a while but it's worth doing that.
I was going to make this a comment, but then I got carried away..
w3schools has suggestions for using semantic web elements on your site. It suggests using a Javascript library called html5shiv.js to add styling support to IE8 and below so you can find javascript files which emulate specific functionality built into HTML5 like JSON2.js and Webforms2.js.
Finally this article gives a full example of emulating a HTML5 form with many of the new attributes/functionality.
As for building the site, I'd recommend building a HTML4 site first using semantic elements freely (with html5shiv) and testing with IE7. Then as you build parts of the site that require new features, research a Javascript file that will provide older browsers with the same functionality, e.g: when it's time to add your first rounded corner or gradient maybe add CSS3Pie. Always remember as well that your box-model; border-radius and gradients are supported in webkit as well as mozilla's API so many css3 attributes you'll need to add 3 times:
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
Unfortunately I don't have a good resource for how the webkit/mozilla APIs compare with HTML5 functionality.
The only functionality I've struggled to find is support for CSS3 selectors in older browsers, often you can get away with this, I mean if you're not gonna upgrade your browser IMHO you can live with few double-thickness borders or missing alternate row styling in tables.
Maybe one day there will be a site that you can upload your code to that will tell you things like "chrome 20.xyz doesn't support rounded corners, add -webkit-border-radius to add support" but until then adding backwards compatibility after the fact will be near-impossible for complex sites.