@import browser compatibility 2013

I read about responsive design and am about to start implementing a new CSS tweak on my site. This made me think of the best way to invoke all of these different CSS files. I will have different CSS for different screen widths.

I discuss two options:

  • Connect to all files from each web page using LINK tags. My only problem with this is the ongoing maintenance (and for this you need to add all these links); I know this is not the end of the world, but it seems a bit intense on the service side.

  • another way is to have only one LINK tag on each web page, pointing to the CSS "feed". This feeder CSS file will include all links to my other CSS files using @imports. This would mean that maintenance would be easy. I could add / reorder / delete CSS files in just one place for the whole site. Large!

However, this leads to the compatibility of the @import function [or its absence in older browsers].

I looked around, and the articles I saw had been at least a couple of years.

So, to get to Noob: what percentage of browsers that are currently in use [July 2013] supports this and can I safely forget about browsers that cannot interpret @import?

If not, what can I do to keep the content of CSS files to a minimum. (Something more elegant than "find and replace on the current site").

+1
source share
3 answers

Instead of worrying about @import s, you should simply combine and minimize all of your CSS files that cannot be sent via CDN:

 <link rel="stylesheet" href="styles-84e599dcbd6c60fa0af76aaa18a5d75f.css" /> 

It will load faster, use less bandwidth and work with any browser that supports stylesheets.

There are many ways to do this. If you are not using any kind of web infrastructure (or using Node.js), check out Grunt .

As for your actual question, if you do not plan to support browsers older than IE5.5, @import will work fine. But I highly recommend a reduced style sheet approach.

+7
source

I'm going to actually say that the accepted answer, now in 2016, is not necessarily correct - for several reasons:

1) HTTP 2.0 is becoming the most used version of the protocol in industrialized countries outside of China (thanks, old IE), and will soon be considered an industry standard (if not already). This means that support for connection multiplexing and header caching eliminates the need to combine files into one; In fact, at the Fluent Conference in SFO last year, the HTTP2 demonstrator actually claimed that splitting things like CSS and images into multiple files would be really better because of the superior HTTP ability to use more bandwidth due to longer connection times.

2). Due to all this front-end automation in CSS, such as SASS and LESS, you are likely to violate the IE 5-9 4095 selection restriction. This is a slightly known mistake, since until now people rarely exceeded this number of selectors in one sheet; however, on corporate sites this is becoming common practice. In principle, all sheets with more than 4095 selectors will still be read, however, browsers are simply silent after that to make any rules.

This does not mean that minimizing to one file is bad, but another approach to splitting is not really bad anymore, and in fact in some cases it is necessary or even better, depending on the needs of the project.

+2
source

Here is some information about browsers http://www.w3schools.com/browsers/browsers_stats.asp

For responsive css I would use media queries, it will not affect old browsers and is great for devices that need flexible css (mobile devices).

http://css-tricks.com/css-media-queries/

0
source

Source: https://habr.com/ru/post/1013048/


All Articles