Home > Developer > Web Develop
The principle of CSS hack:
Due to different browser and browser versions of CSS support and parsing results are not the same, and CSS priority on the effect of the browser display, we can apply different CSS for different browser scenarios.
Conditional Annotation Method:
Effective only under IE:<!--[if ie]> this text is only displayed in IE browser <! [endif]--> only takes effect under IE6:<!--[if IE 6]> this text is only displayed in IE6 browser <! [endif]--> only in IE6 above version:<!--[if GTE ie 6]> this text only in IE6 above (including) version of IE browser display <! [endif]--> only does not take effect on IE8:<!--[if! IE 8]> This text in non-IE8 browser display <! [endif]--> non-IE browser in effect:<!--[if! Ie]> This text is only displayed in non-IE browser <! [endif]-->
Intra-Class attribute prefix method:
| Hack | Writing | Instance | IE6 (S) | IE6 (Q) | IE7 (S) | IE7 (Q) | IE8 (S) | IE8 (Q) | IE9 (S) | IE9 (Q) | IE10 (S) | IE10 (Q) |
| * | *color | Cyan | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| + | +color | Green | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| - | -color | Yellow | Y | Y | N | N | N | N | N | N | N | N |
| _ | _color |
Blue | Y | Y | N | Y | N | Y | N | Y | N | N |
| # | #color | Purple | Y | Y | Y | Y | N | Y | N | Y | N | Y |
| / | Color:red\0 | Red | N | N | N | N | Y | N | Y | N | Y | N |
| \9\0 | Color:red\9\0 | Pink | N | N | N | N | N | N | Y | N | Y | N |
| !important | Color:blue!important;color:green; | Brown | N | N | Y | N | Y | N | Y | N | Y | Y |
Description: In standard mode
Selector Prefix method:
The selector prefix method is for browsers that are inconsistent with some pages or that require special treatment, hack with prefixes that are only recognized by certain browsers before the CSS selector.
At present, the most common is
*html * prefix is only valid for IE6 *+html *+ prefix is only valid for IE7 @media screen\9{...} Valid for IE6/7 only @media \0screen {body {background:red;}} Valid only for IE8 @media \0screen\,screen\9{body {background:blue;}} Only valid for Ie6/7/8 @media screen\0 {body {background:green;}} is valid for IE8/9/10 only @media screen and (min-width:0\0) {body {background: Gray }} only valid for IE9/10 @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {body {background:orange;}} only for IE1 0 effectiveCSS Hack pros and cons
In general, we try to avoid the use of CSS hack, but in some cases in order to take into account the user experience to achieve backward compatibility, the last resort to use hack. For example, because IE8 and the following versions do not support CSS3, and our project pages use a lot of CSS3 new properties to render normally under Ie9/firefox/chrome, if you do not use Css3pie or HTC or conditional annotations, you may have to ie8- 's exclusive hack. While using hack is good for consistency in page performance, excessive abuse can cause HTML documents to become cluttered, adding to the burden of management and maintenance. I believe that as long as we work together, less use, cautious use of hack, the future will certainly promote the standards of browser manufacturers increasingly unified, smooth transition to the mainstream of standard browser era. Discard those old IE hack, will reduce our coding complexity, less do not work hard.
2, introduce the CSS box model.The box-shaped model is an important concept in CSS. The most important thing in a box-like model is content, which is a must, and the other items are optional. For example, the box-like model has an inner-to-outer order:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>CSS Box model</title> <style> *{margin:0;padding:0;} /*Clear Browser Default margins*/. Block{width:300px;Height:200px;padding:10px;Border:10px solid Red;background:#000;margin:20px 0 0 20px;}. Box{Height:100px;width:200px;background:Yellow;Color:#ff4a00;Border:5px Solid Green;} </style></Head><Body> <Divclass= "Block"> <Divclass= "box">Content</Div> </Div></Body></HTML>
3. What is CSS cascading? Introduce yourself.
I agree with the understanding that cascading refers to the style of the parent tag automatically inherits to all its subordinate labels, such as the font style set by the label selector for <body> is automatically applied to <p> under <body> unless <p> Overridden a related style to overwrite it.
CSS semantic naming refers to the name of the class or ID appended to the HTML tag with an easy-to-understand title, such as <div> at the top of the page, with its ID as the header, <div> at the bottom of the page as footer, can enhance the maintainability of CSS.
Basically cascading means "inherit", "Weight", "overwrite", better implement the result through good hierarchy naming, less code, more functions.
4, all know which CSS browser compatibility issues.Issue 1: The default margin (margin) and padding (padding) for different browser labels are different
Solution: *{margin:0;padding:0;}
Note: Wildcard *,CSS traversal is not recommended (although modern browsers can ignore it). Can write full body,p,html,h1,h2,h3 ... {margin:0;padding:0;}
Issue 2: block attribute label float, and there are rows of margin in the case, the IE6 display margin than the set of large
Solution: Add Display:inline to the label style control of float and convert it into inline properties
Note: Our most commonly used is the div+css layout, and Div is a typical block attribute tag, horizontal layout when we are usually implemented with div+float, horizontal spacing setting if using margin to achieve, this is a inevitable encounter compatibility problem.
Issue 3: image is spaced by default
Solution: Use the Float property for the IMG layout, the up and down spacing can be set vertical-align:middle, or set to Display:block.
NOTE: Because the IMG tag is an inline attribute tag, the img tag is lined up on a single line as long as the container width is not exceeded, but there is a gap between the IMG tags in some browsers. Removing this spacing using float is the right path.
Issue 4:CSS Transparency issues
Solution:
IE:filter:progid:DXImageTransform.Microsoft.Alpha (style=0,opacity=60).
ff:opacity:0.6.
Note: It is best to write all two, and put the opacity attribute below.
Question 5: CSS fillet problem
Solution: IE7 The following versions do not support rounded corners, other browsers are prefix examples: FF (-moz-)
Note: As browsers update, fillet attributes are supported; Ie6-7 can be implemented with triangles (interested can study)
5. What are the new contents of CSS3?CSS3 border:
CSS3 Background:
CSS3 Text effects:
CSS3 Font:
css32d Conversion:
css33d Conversion:
CSS3 Transition:
CSS3 Animations:
Animation: Animation settings
@keyframes: Creating animation rules
CSS3 Multiple columns:
CSS3 User interface:
Front-end question finishing (CSS)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
