Geek Answers Handbook

Best practices for CSS3 backgrounds and support for older browsers?

My colleague and I have difficulty deciding on the best practice approach for ie6, i.e. support for the site we are building. The site is intended for an older audience, therefore it is not recommended to support these browsers.

At the same time, we are trying to introduce modern coding methods in our work so that we can practice and fully understand the possibilities. The specific area I want to talk to you guys is handling taillights for CSS3 backgrounds.

We have 2 options if we use CSS3 backgrounds and do not add extraneous wrapping tags for the background:

  • Usage: after ,: before, etc. pseudo-elements to add multiple elements to elements. (this is the choice we made now)
  • Use a few basic CSS3 specifications.

This gives a more elegant layout and is certainly a step in the right direction. But what about browsers that do not support these features?

Modernizr.js tells us to check for specific support, and then write fallbacks:

Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });

However, we have not been given many recommendations regarding actual reserves for specific functions. So, in the case of something like CSS3 background, what would be an effective return strategy?

If we (for example) used jQuery to wrap extra tags (i.e. btn-container, nav-container, etc.) around navigational elements, buttons, and containers to add extra elements to add style attributes?

+4
source share
3 answers

About CSS3 multiple backgounds and / or background gradients I think the approach is better than what you suggest: CSS3 Pie .

This way you can use all these nice effects in IE6, 7 and 8 (including border-radious as well) without JavaScript intervention.

+2
source

1. Failure is elegant. Some complex elements can be hidden using CSS and shown when loading a page using JavaScript, depending on the browser, as one example.

2. Conditional style sheets or JavaScript fixes. Spend a lot of time fixing every problem in every browser and write a style sheet for her. You can also try various JavaScripts that claim to be compatible with older browsers. I tried this JavaScript , but it seems to conflict with jQuery. CSS Pie is another option that allows you to use rounded corners for older browsers.

3. Ignore old browsers. Nothing special for older browsers. People on IE6 / 7 already see the world differently than everyone else. In addition, do not do anything special for older browsers, but actively avoid overly complex functions and functions. If you wish, you can add a small update message with minimal effort.

+2
source

If we (for example) used jQuery to wrap extra tags (i.e. btn-container, nav-container, etc.) around navigational elements, buttons, and containers to add extra elements to add style attributes?

This is definitely one right approach. Depending on the design and the elements in question, you may find that simply providing a primary background is enough to provide a decent look and a perfectly functional, albeit not visually identical, component.

“Supporting older browsers does not always mean“ putting a lot of effort / writing tons of extra code to ensure close visual consistency. ”It's hard, but not impossible, to deploy the QA team to understand the concept of Progressive Enhancement, as it can be applied to aspects of pure visual presentation.

+1
source

More articles:


All Articles