Cutting the Mustard with CSS Media Queries

Core points

• The "Cutting the Mustard" technology utilizes JavaScript to detect browser functionality and then loads additional CSS and JavaScript to provide an enhanced user experience; otherwise, only the necessary files required for the core experience are loaded.
• The author recommends using CSS media queries to conditionally load style sheets based on the browser's functionality, thus avoiding JavaScript and preventing older browsers from loading style sheets designed for new browsers.
• The author proposes a method to determine if the property is set by using harmless non-default CSS attributes on the body element and using JavaScript and getComputedStyle to load or only in supported browsers or Run the script.
• The author provides the final code combining all the discussion techniques to demonstrate a way to detect relatively new browsers and prevent older browsers from applying styles or running scripts, allowing developers to focus on newer browsers Build functions.

"Cutting the Mustard" is a term coined by Tom Maslen of the BBC. This method uses JavaScript to check browser features and then load more CSS and JavaScript to provide an "enhanced" experience; otherwise, the browser will load only the necessary files required for the "core" experience.

Recently, interest in "Cutting the Mustard" has surged, such as "Migrating to Flexbox through "Cutting the Mustard" and "Server-side Mustard Cut", and more extensively progressive enhancements.

Improvement method

However, in my experience, even a very basic "core" experience can cause problems on some very old browsers, so I want to improve on this to see if it is possible to reject it altogether Very old browsers use any CSS, leaving only HTML behind.

Of course, the obvious solution is to use JavaScript to conditionally load all CSS (if the browser passes the "Cutting the Mustard" test), but this feels too rough for me; modern powerful browsing that can't load JavaScript The device will be punished for having no style at all. So I looked for a way to solve this problem using CSS only and I found an old article by Craig Buckler. After a lot of experiments and adjustments, I came up with the following method:

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

Let's analyze what's going on here.

Working principle

The media query for the first <link> element only allows the stylesheet to be loaded in the following browsers:

• IE 9
• FF 8
• Opera 12
• Chrome 29
• Android 4.4

The media query for the second <link> element only allows the stylesheet to be loaded in the following browsers:

• Chrome 29
• Opera 16
• Safari 6.1
• iOS 7
• Android 4.4

When used in conjunction, this technique does not load style sheets unless the browser is the following:

• IE 9
• FF 8
• Opera 12, 16
• Chrome 29
• Safari 6.1
• iOS 7
• Android 4.4

Note: The stylesheet is loaded only once regardless of the number of <link> elements.

Media queries can be combined into a <link> element by comma-separating declarations, as shown below:

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

However, I personally prefer to separate them because I find it easier to see what is going on.

So, if you build the tags in a semantic and accessible way, legacy browsers are still able to view content that you don't style in plain HTML.

This is of course very subjective, but my point is that anyone who still uses these browsers should be able to get what they need. It is very likely that by providing these browsers with CSS for newer browsers, some content will be interrupted, which may mean that the page is completely unusable. Using this method, they can get at least one clean page. More importantly, You will never need to test in these browsers again. You're done! At least, in theory.

Of course, your support needs may vary, but the advantage of this technology is that you can build on this. For example, if you need to add support for IE8, you can use conditional annotations to load the same stylesheet only for that browser:

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

Organize if you need to support older WebKit devices with a pixel ratio greater than 1, you can add another

element with a target media query as follows: <link>

<code class="language-html"><!--[if IE 8]>
  <link rel="stylesheet" href="css/your-stylesheet.css">
<![endif]--></code>

In itself, this will only load the stylesheet for Android 2.2 (I can't test earlier versions), but since it's included in the

other elements, it Actually just adding support for this set of other browsers. <link> You can also change the main media query for the

element I provide here to get the custom support you need. However, it takes a lot of testing to do this, so be careful!

<link>

"But they are hacks!"

Yes, I guess they are, but it depends on your definition. Media queries are designed to test browser functionality before applying CSS, and that's exactly what we want to do in this case, albeit indirectly.

Nevertheless, I'm happy with the technology whether it's hack or not, and it works fine in all my tests, and I plan to use it for the production site soon.

Ineffectiveness

In all the tests I've done so far, I've found only one situation where things are not working as expected. On Android 4.4, UC browsers do not respond to media queries. As far as I know, UC browsers use older versions of WebKit, which explains this.

If you want to support this browser, you can force load CSS with a small number of user agent sniffing:

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm)">
<link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

As a bonus, as far as I know, JavaScript cannot be disabled in Android UC browsers, so stylesheets should always be loaded unless network failures, etc.

Of course, if you find that you need to support other specific browsers, you can always add to the user agent sniffing condition, but I recommend using it with caution as it violates this type of CSS only Purpose of technology.

I made a test page to test the basic method on different browsers. If you find any browsers don't work as expected, or if you find any other media queries that can add support for a specific browser or browser scope, let me know in the comments or ask a question in the GitHub repository.

Load the script?

OK, if you use CSS to detect browser support, you will most likely want to load or run some or all of the scripts in the browser you support. So how can we do this?

Okay, there are several ways to do this, but I found the easiest one is as follows:

• In the stylesheet, insert a harmless non-default CSS property on the body element.
• Use JavaScript and getComputedStyle to determine if your attribute is set on the body element.
• If set, run or load other JavaScript.

For example, the default value of the clear attribute is none. Setting it to body's both has little effect on the page's display (if it does, you must use other properties). So the code in your stylesheet will look like this:

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (min-resolution: 0.1dpcm), only screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)"></code>

In your page (or script file):

<code class="language-html"><!--[if IE 8]>
  <link rel="stylesheet" href="css/your-stylesheet.css">
<![endif]--></code>

Final code

Whether it is a hack or not, what I'm trying to show here is a reusable method for detecting relatively new browsers and preventing older browsers from applying styles or running scripts, resulting in them showing only the page's HTML. There is very little code required and it should allow you to focus on building wonderful features for more modern browsers using more modern technologies without worrying about it.

While you may not need everything I have provided here, putting all the parts together will give the following results:

<code class="language-html"><link rel="stylesheet" href="css/your-stylesheet.css" media="only screen and (-webkit-min-device-pixel-ratio:1.1)"></code>

I've made another test page with all the extra content (SitePoint occasionally deletes the years-old demo hosted on separate HTML pages. We do this to reduce outdated code (with public vulnerabilities) Risks that pose risks to users. Thank you for your understanding. ).

Acknowledgements

I wouldn't be able to do this without the work of BrowserStack, Can I Use and the staff at Browserhacks and Jeff Clayton, so thanks to everyone involved, let me know if you have any ideas or feedback.

FAQs about CSS media queries and "Cutting the Mustard" (FAQ)

What does "Cutting the Mustard" mean in CSS media queries?

In the context of CSS media queries, "Cutting the Mustard" is used to describe a technology in which a website or web application checks whether the user's browser supports certain features before providing a complete experience. If the browser cannot "Cutting the Mustard", a simpler, more basic website or application version will be available. This approach ensures that all users can access the content of the website, regardless of the functionality of their browser.

How to determine if the browser is "Cutting the Mustard"?

To determine if the browser is "Cutting the Mustard", you can use simple JavaScript testing. This test checks whether the browser supports certain features such as querySelector and localStorage. If the browser passes the test, it is considered "Cutting the Mustard" and can handle the full experience of the website or application.

Why is “Cutting the Mustard” technology important?

"Cutting the Mustard" technology is important because it ensures that your website or web application is accessible to all users regardless of the functionality of their browser. By providing a simpler version of the website to browsers that cannot "Cutting the Mustard", you can ensure that all users have access to your content.

Can I use CSS media queries without JavaScript?

Yes, you can use CSS media queries without JavaScript. However, using JavaScript with CSS media queries allows you to provide users with a more tailored experience based on their browser capabilities.

What are some of the features examples that may be checked in the "Cutting the Mustard" test?

The "Cutting the Mustard" test may check for features such as

, querySelector and localStorage. These are all supported features by modern browsers, but may not be available in older browsers. addEventListener

How to implement the "Cutting the Mustard" test in my website or web application?

To implement the "Cutting the Mustard" test, you can use a simple JavaScript test to check for certain features. If the browser passes the test, you can use CSS media queries to provide a complete experience of the website or application.

What happens if the browser cannot "Cutting the Mustard"?

If the browser cannot "Cutting the Mustard", it will get a simpler, more basic website or application version. This ensures that all users can access your content regardless of the functionality of their browser.

Can I customize the experience that I provide for a browser that cannot "Cutting the Mustard"?

Yes, you can customize the experience that you provide for browsers that cannot "Cutting the Mustard". You can use CSS media query to customize the design and functionality of a website or application for these browsers.

Are there any disadvantages of using the "Cutting the Mustard" technology?

A potential drawback of using the “Cutting the Mustard” technology is that it requires additional development time to create and test simplified versions of websites or applications. However, the benefits of ensuring that all users have access to content often outweigh this disadvantage.

Is the “Cutting the Mustard” technology still relevant today?

Yes, the “Cutting the Mustard” technology is still relevant today. While modern browsers support a wide variety of features, there are still many users using older browsers that may not support them. By using the “Cutting the Mustard” technology, you can ensure that your website or application is accessible to all users.

The above is the detailed content of Cutting the Mustard with CSS Media Queries. For more information, please follow other related articles on the PHP Chinese website!