js, css, html determine the various versions of the browser

Use regular expressions to determine the IE browser version

Determine whether it is IE browser

if (document.all) { alert("This is IE browser");}

Determine whether it is IE6 browser

Method 1: if ( /MSIE 6.0/ig.test(navigator.appVersion) ) {alert("This is IE6 browser");}
or /MSIE 8/.test(navigator.appVersion)

Method 2:

var IE = !+'\v1';

IE6 = IE && ([/MSIE(\d)\.0/i.exec(navigator.userAgent)][0][1] == 6)

Determine whether it is IE7 browser

if ( /MSIE 7.0/ig.test(navigator.appVersion) ) {alert("This is IE7 browser");}

Judge the IE browser based on the above, and judge other IE browsers by the same logic.

Identify each browser by browser version information

var _uat=navigator.userAgent;
if(_uat.indexOf("MSIE 6.0")>0) alert("ie6");
else if(_uat.indexOf("MSIE 7.0")>0) alert("ie7");
else if(_uat.indexOf("MSIE 8.0")>0) alert("ie8");
else if(_uat.indexOf("Firefox")>0) alert("firefox");

CSS determines the browser
#example{color:red ;} /*firefox*/
* html #example{color:blue;} /*ie6*/
*+html #example{color:green;} /*ie7*/

HTML determines the browser
1. Available except IE
2. 
3. 
4.
5. 
6.
7. 
8. 

Version numbers in css and js links in HTML

background

Search the keyword .htaccess cache in the search engine, and you can find many tutorials on setting up website file cache. By setting up, you can cache CSS, JS and other files that are not updated frequently on the browser side, so that every time a visitor visits your website, the browser can get CSS, JS, etc. from the browser cache instead of reading from your server. This speeds up the opening of the website to a certain extent and saves your server traffic.

question

Now the problem comes. The css and js caches set by .htaccess have an expiration time. If css and js have been cached in the visitor's browser, the browser will only read css and js from the cache before these css and js caches expire. If you modify css and js on the server, then these changes will not change in the browser of returning customers, unless the returning customer presses Ctrl + F5 to refresh your website page or manually clears the browser cache. A website has tens of thousands of visitors, many of whom are repeat visitors. You can’t ask every visitor to refresh the cache after updating the CSS. So how would you deal with this problem?

Solution

1. Change the css file name: In fact, it is very simple to solve this problem. The cache is marked by the file name. After you update the CSS file content of the website, just change the CSS file name. For example, the css call statement in the original html is as follows:

<link rel="stylesheet" href="http://www.example.com/style.css" type="text/css" media="screen" />

Just change the css file name:

<link rel="stylesheet" href="http://www.example.com/index.css" type="text/css" media="screen" />

Another way to change the css file name is to write the version number into the file name, such as:

<link rel="stylesheet" href="http://www.example.com/index.v2011.css" type="text/css" media="screen"/>

After the css file is updated, just change the version number in the file name:

<link rel="stylesheet" href="http://www.example.com/index.v2012.css" type="text/css" media="screen"/>

2. Add a version number to the CSS file: In fact, it is a bit troublesome to modify the CSS file name every time the CSS file is modified. Then we can add a version number in the loading CSS statement (that is, the content after ? in the CSS link). For example, the css call statement in the original html is as follows:

<link rel="stylesheet" href="http://www.example.com/style.css?v=2011" type="text/css" media="screen"/>

Just change the version number of the css file to 2012:

<link rel="stylesheet" href="http://www.example.com/style.css?v=2012" type="text/css" media="screen"/>

Summarize

In fact, the question mark after the css file has no practical effect and can only be used as a suffix. If you use the question mark plus parameter method, you can add version number and other information, and refresh the browser cache at the same time. A small detail can bring us great convenience.

<<: HTML version declaration DOCTYPE tag

>>: Detailed explanation of JavaScript function this pointing problem

Example of Vue transition to achieve like animation effect

js, css, html determine the various versions of the browser

Example of Vue transition to achieve like animation effect

MySQL 8.0.22 winx64 installation and configuration method graphic tutorial

Linux server configuration IP whitelist to prevent remote login and port exposure

js array entries() Get iteration method

Detailed explanation of the principles and implementation methods of Mysql account management

Pagination Examples and Good Practices

Singleton design pattern in JavaScript

Tips for List Building for Website Maintenance Pages

Detailed explanation of XML syntax

Detailed introduction to logs in Linux system

Recommend

MySQL 5.7.13 installation and configuration method graphic tutorial (win10 64 bit)

Detailed explanation of the use of Vue3 state management

Implementation of ssh non-secret communication in linux

Detailed explanation of the difference between flex and inline-flex in CSS

MySQL table auto-increment id overflow fault review solution

The grid is your layout plan for the page

How to draw a cool radar chart in CocosCreator

How to check if data exists before inserting in mysql

Introduction and use of Javascript generator

Sharing of SQL optimization experience when offset is too large during MySQL paging

MySQL 8.0.23 Major Updates (New Features)

Quickly install MySQL5.7 compressed package on Windows

Detailed explanation of CSS style cascading rules

Detailed explanation of the MySQL MVCC mechanism principle

How to compare two database table structures in mysql