Front-end CSS compatibility ideas

 

I couldn't sleep in the middle of the night. I got up and wrote my first blog.

Recently, the company wants to add a color change function for a website product. I am responsible for this matter.

I have previously participated in some custom projects based on the secondary development of this product. To be honest, the front-end structure is messy. Therefore, the first step is to refactor the html front-end tag and standardize the tag structure and className. Step 2: add the CSS code according to the original style of the product.

At this time, I encountered the problem of a rounded border. The previous Code was to write a fixed div on each page and use the background image to implement the rounded border. The code structure is roughly as follows:

{:;}{:;}{:;}{:;}

                 　　　　...                 

During refactoring, I directly changed this structure to the most simplified version.

There is a problem here: boder-radius can be used to implement a rounded border, but IE7 and IE8 are not supported.

At that time, I thought that my specification was correct, so I hope to achieve IE7/IE8 compatibility without modifying the HTML code structure.

Search for IE7/IE8 solution: http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html

Based on this, js is used for compatibility with IE7/IE8. The main code logic is as follows:

(  (document.documentElement.style["border-radius"]) == "string")          borderRadius :  b = .wrap("<div></div>"                          b.css( {margin : .css("margin") , "width ": .css({margin:"0" borderColor = .css("border-color");
　　　　　　　　 background = .css("background-color" borderStyle = .css("borer-style"             .css({"border-top-width":"0","border-bottom-width":"0"});                          
　　　　　　　　 setting = { m: [1,2,3,5],bw : [1,1,2,0 i = 0(; i < 3; i++ t = $("<b><b>").css({"height": 1 , "margin" : "0 " + setting.m[i] + "px""border-left-width" : setting.bw[i] +"px","border-right-width" : setting.bw[i] +"px""border-color":borderColor,"background-color" t = $("<b><b>").css({"height": 1 , "margin" : "0 " + setting.m[i] + "px""border-width" : "0"-color"".content"".border1"

Although the HTML structure at run time has changed, the HTML structure at encoding time has not changed. This is a compatible method.

I still remember that JavaScript has previously processed compatibility with some other pseudo classes and listed them together:

Scenario: move the cursor to display the level-2 menu.

Common Practice:

{}{:;}{:;}

Level 1 Level 2 Level 2

When IE6 is not supported, you can adjust it.

{}{:;}{:;}/* Added a style name */

Added compatibility with JS

If (not supported: hover)
{
$ (". Menu li "). hover () {$ (). addClass ("li_hover (). removeClass ("li_hover ");})
}

Add the following JS to be compatible with the touch screen

".menu li").click( isHover = $().hasClass("li_hover"(!).addClass("li_hover").removeClass("li_hover"

These methods are just personal preferences. Comments are welcome.