Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Checking for browser support

From: CSS: Core Concepts

Video: Checking for browser support

One of the more frustrating aspects of working with CSS is having to deal with varying degrees of support for CSS, as well as rendering inconsistencies from one browser to the next. Now the speed with which browser versions are being updated and the constantly changing nature of the CSS specifications make these issues really unavoidable. Now what they mean for you as a designer is that you'll need to have a strategy for which browsers that you're supporting, as well as how to deal with those browser inconsistencies, and this is a site that you need to become familiar with.

Checking for browser support

One of the more frustrating aspects of working with CSS is having to deal with varying degrees of support for CSS, as well as rendering inconsistencies from one browser to the next. Now the speed with which browser versions are being updated and the constantly changing nature of the CSS specifications make these issues really unavoidable. Now what they mean for you as a designer is that you'll need to have a strategy for which browsers that you're supporting, as well as how to deal with those browser inconsistencies, and this is a site that you need to become familiar with.

This is the GlobalStats StatCounter, and it's a great site for finding out statistics about web usage-- including browser versions--and operating systems. And I'm just going to scroll down a little bit here and show you what we are looking at. So currently right now I'm looking at the top five browsers from October 2010 to October 2011. And if I want, I can look at it by browser, mobile browser, operating system, mobile operating system. I can look at it by region, so if I want, I can filter that out and just look at it by North America. And I can even customize the time Period if I want.

If I want to look at it for just, say, the last three months, I could do that and it goes ahead and it gives me the settings for just the last three months, so I can see if there is any dramatic changes. So once you understand which browsers that you are designing for, you'll need to know the level of support that those browsers have for the properties that you're going to want to use in your CSS. So how do you find that out? The best way is to simply test them yourself, in the widest range of browsers possible. Ideally, when designing web sites you want to test it in Safari, Chrome, Firefox, Opera, and Internet Explorer at a minimum.

In many cases, you're going to need to test across mobile versions of those browsers as CSS support changes over the course of different browser versions. And web authors can also no longer ignore mobile devices either. Unfortunately, testing on mobile devices is a little bit trickier than desktop testing, but there are some online services out there that can help you see what your site looks like within the mobile space. Putting this as simple as I can, there's no substitute for testing your pages on as many browsers and devices as you possibly can.

The reality of course is that testing across a wide array of devices and browsers isn't always possible. You should work to build as wide a test suite as you can on your own system, but realistically, you'll often going to need to just rely on knowing what does and what doesn't work in various browsers. Now thankfully, there are several sites that can help you get a better understanding of what is and what isn't supported, so let's go and take a look at a couple of those. Now the first site I want to show you is caniuse.com.

This is a great site. Now one of the things this allows me to do is check for various HTML and CSS properties. So if I go to the Show options here-- I'm going to just go ahead and turn off all the categories except for CSS; that'll help us sort of narrow this down a little bit. And now if I scroll through this, you can see all these different properties, like CSS inline-block, the CSS 2.1 selectors, the minimum and maximum width and height, fix position, on, and on, and on. It just goes through a tremendous amount of properties. This site does tend to focus on CSS3 properties, so really the newer properties, but it gives you a nice little table of all the different browsers and which versions of those browsers support it, if they support it, and whether they offer partial support or not.

A lot of times you'll have links to resource pages that talk a little bit more about that property or a little bit more about the browser's support. You can also look at different versions of the browsers as well, so you can see sort of a cascading chart to see at what point support started and whether it was partial support or full support. So this is a really great site. Now another site that you want to focus on is quirksmode.org. This is PPK's site and one of the mainstays of this site is the browser compatibility tables. And if I click on this I get this Compatibility Master Table that allows me to go into things like CSS 2 or CSS3 and really drill down and see what the support is for specific things.

So here you can see all the different browsers, browser versions that PPKE is checking for support from, and it goes through items like all these different selectors, pseudo-class selectors, all these declarations, and it will give you some detailed information about what's supported, what's not, and maybe even why it's not supported or what goes wrong. So this is definitely a site that you want to come back to time and time again. Now another site that I really like--and I'm just going to go ahead and open it up in a new tab because this is a site I really want to show you guys--is if I go to reference.sitepoint.com/css, this takes me to sitepoint's CSS reference page.

I really like this page because they make it very easy to find specific things. So, for example, @import that we were just using in last movie, if I click on that, it gives me more of a description of that particular rule or property. And then I get this nice sort of compatibility table down here that tells me whether it is fully supported or whether there is some bugginess to the implementation, and it will even give me some feedback on what isn't supported or what the problems are with that particular rule or property. So this is a reference that you're probably going to want to spend a good bit of time looking at and exploring.

There is also really no better place to check for support than the browsers themselves. Now Mozilla does just an amazing job of documenting browser support. For example, check out this page on CSS support at the Mozilla Developer Network. If I scroll down through here, you can see every single selector, combinator, pseudo-elements, structural pseudo- classes--and a lot of these things we're going to go over in just a little bit. But properties, you get a full property listing, whether it's supported or not, what version it was supported, and in a little bit we're going to be experimenting with using some of these vendor prefixes and this is really nice, whether or not you need a vendor prefix for a specific element about and for which browser version.

So this is something that you're definitely going to want to bookmark this page as a reference, but the overall Mozilla Developer Network site has tons of fantastic articles about Firefox, web design, and CSS that you're going to want to read through as well. Now the Safari Developer Library is a little bit more technical in nature, and it feels more like a technical reference manual, but this has a wealth of material on it. And I'm looking at the Supported CSS Properties page. Now, what's really nice about this, again, is it goes through every single property, whether it's supported or not, when it was supported, and the syntax for it as well.

So this is really, really nice. Chrome doesn't have a site like this, but since Chrome is a WebKit-based browser, essentially what applies here also applies to Chrome as well. Now I'm a really big fan of Opera's Web specifications support page, so I can find this at opera.com/docs/specs. Now this isn't just for CSS, but obviously that's what we're focusing on. What I like about this is I can look at the different versions of Opera's Presto rendering engine. So I can target a specific Opera version based on that rendering engine and once I do that--let's say I go over here, for example, and go into Presto 2.9 which is the most recent version--I can take a look at support for a lot of different items.

Look, for example, at all the different sections that apply to CSS. We have all the CSS3 modules broken out into separate sections. We have things like CSS Properties. If I click on that, again I get this chart of properties, the values that are applicable for it, description of it, and whether not that property is supported, or whether it has things like partial support to it. So this page is fantastic--again, definitely something you're going to want to bookmark. And finally, Microsoft has a great page for CSS compatibility and Internet Explorer.

Again, this is found on the MSDN Microsoft Network. This page is actually based heavily off of Mozilla's CSS support page, and you're going to get different properties and selectors and in which version of Internet Explorer supports it, so at which point you can start targeting that specific rule for a version of Internet Explorer. Now I'm betting that those are enough resources to at least get you started. Now I know it may seem a little bit overwhelming, but don't despair. I mean, for example, I don't go through and read through every single one of these pages.

A more likely scenario is that you're going to want to use a property you've never used before, so then you sort of check these sites to see what the current level of support, or which versions of the browser support something. Maybe a better way to look at this is that really just reading through the specifications and becoming familiar with browser support levels by going through some of these pages, it's just simply a part of the process of learning CSS and if you look at it that way, it's really just one more thing that you do in order to understand what it is that you're working with.

Show transcript

This video is part of

Image for CSS: Core Concepts
CSS: Core Concepts

81 video lessons · 43585 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 4m 57s
    1. Welcome
      55s
    2. Using the exercise files
      4m 2s
  2. 1h 7m
    1. Exploring default styling
      4m 56s
    2. CSS authoring tools
      2m 29s
    3. CSS syntax
      4m 45s
    4. Writing a selector
      4m 10s
    5. Setting properties
      8m 40s
    6. Common units of measurement
      7m 47s
    7. Inline styles
      5m 1s
    8. Embedded styles
      5m 19s
    9. Using external style sheets
      10m 34s
    10. Checking for browser support
      8m 48s
    11. Dealing with browser inconsistencies
      5m 30s
  3. 2h 15m
    1. Structuring HTML correctly
      2m 51s
    2. Element selectors
      4m 52s
    3. Class selectors
      6m 4s
    4. ID selectors
      3m 27s
    5. Using classes and IDs
      10m 7s
    6. Element-specific selectors
      4m 35s
    7. The universal selector
      5m 42s
    8. Grouping selectors
      4m 49s
    9. Descendent selectors
      7m 32s
    10. Child selectors
      5m 7s
    11. Adjacent selectors
      5m 30s
    12. Attribute selectors
      12m 43s
    13. Pseudo-class selectors
      3m 54s
    14. Dynamic pseudo-class selectors
      8m 29s
    15. Structural pseudo-class selectors
      6m 45s
    16. Nth-child selectors
      13m 10s
    17. Pseudo-element selectors
      12m 40s
    18. Targeting page content: Lab
      8m 56s
    19. Targeting page content: Solution
      7m 59s
  4. 42m 39s
    1. What happens when styles conflict?
      4m 0s
    2. Understanding the cascade
      5m 47s
    3. Using inheritance
      6m 11s
    4. Selector specificity
      6m 55s
    5. The !important declaration
      4m 5s
    6. Reducing conflicts through planning
      3m 33s
    7. Resolving conflicts: Lab
      6m 45s
    8. Resolving conflicts: Solution
      5m 23s
  5. 1h 47m
    1. Setting a font family
      7m 10s
    2. Using @font-face
      9m 18s
    3. Setting font size
      7m 35s
    4. Font style and font weight
      6m 52s
    5. Transforming text
      3m 58s
    6. Using text variants
      2m 49s
    7. Text decoration options
      4m 26s
    8. Setting text color
      3m 2s
    9. Writing font shorthand notation
      8m 49s
    10. Controlling text alignment
      6m 33s
    11. Letter and word spacing
      9m 11s
    12. Indenting text
      4m 30s
    13. Adjusting paragraph line height
      10m 30s
    14. Controlling the space between elements
      6m 41s
    15. Basic text formatting: Lab
      8m 45s
    16. Basic text formatting: Solution
      7m 14s
  6. 2h 1m
    1. Understanding the box model
      16m 53s
    2. Controlling element spacing
      14m 29s
    3. Controlling interior spacing
      10m 49s
    4. Margin and padding shorthand notation
      6m 27s
    5. Adding borders
      8m 57s
    6. Defining element size
      10m 7s
    7. Creating rounded corners
      6m 58s
    8. Background properties
      2m 51s
    9. Using background images
      5m 10s
    10. Controlling image positioning
      10m 25s
    11. Using multiple backgrounds
      7m 5s
    12. Background shorthand notation
      5m 25s
    13. Styling container elements: Lab
      7m 55s
    14. Styling container elements: Solution
      8m 17s
  7. 47m 51s
    1. Color keyword definitions
      5m 4s
    2. Understanding hexadecimal notation
      6m 5s
    3. Using RGB values
      4m 58s
    4. Using HSL values
      5m 17s
    5. Working with opacity
      2m 23s
    6. Using RGBa and HSLa
      3m 8s
    7. Styling drop shadows
      5m 38s
    8. CSS gradients
      6m 32s
    9. Working with color: Lab
      4m 26s
    10. Working with color: Solution
      4m 20s
  8. 1m 58s
    1. Additional resources
      1m 58s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Core Concepts.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.