AtoZ CSS Quick Tip: Achieving Cross Browser Support

S is for support in multiple browsers

Keeping track of which browsers support which features is practically a full-time job. There are great sites out there like caniuse.com to keep us in the loop and amazing automation tools like Autoprefixer that mean you'll never have to write a vendor prefix ever again.

But still, as diligent front-end developers and designers, we need to ensure that our content is accessible to as many users as possible and even if they don't get the super fancy version, they can still consume the content and get the information they need.

These quick tips will suggest areas that you don't need to fret about (for the most part) whilst still ensuring that your projects work across a wide range of browsers and devices.

Don't worry about animations and transitions

For the most part animations and transitions should be subtle effects to make the content stand out more, direct the user's attention or add a bit of personality and character to a page. If animations or transitions aren't supported in a particular browser, the elements will just remain static or snap between states on hover of focus.

As long as the initial state of the animation isn't positioning an element off screen or making it invisible (eg. by setting opacity: 0) then the fact that the element won't move in an old browser doesn't really matter.

In the case of animations, you could try and provide a fallback using JavaScript but I'd really have to think hard about whether the extra effort, code and maintenance is worth the hassle.

Don't worry about subtle transformations

In a similar vein to the comments about animations and transitions, I'd also not stress too much about making subtle effects like rotations or skews work across every device either.

Continue reading %AtoZ CSS Quick Tip: Achieving Cross Browser Support%

by Guy Routledge via SitePoint