css compatible writing method

CSS compatibility issue has always been one of the difficulties in front-end development. Since different browser engines implement styles in different ways, the same CSS code may have different effects in different browsers. In order to ensure that web pages can be displayed normally in all browsers, developers need to master some CSS-compatible writing techniques.

1. CSS prefix

CSS prefix refers to special styles added to be compatible with different browser cores. For example, -webkit- is for compatibility with Webkit core browsers (such as Chrome, Safari), -moz- is for compatibility with Gecko core browsers (such as Firefox), and -ms- is for compatibility with Trident core browsers (such as IE).

Common CSS prefixes include: -webkit-, -moz-, -ms-, -o-, etc.

When writing CSS code, we can adapt to different browser cores by adding CSS prefixes. For example, the following code implements the text gradient effect and adds corresponding prefixes to different browser cores:

text-shadow: 2px 2px 2px rgba(0,0,0,0.5);
background-image: -webkit-linear-gradient(red, yellow);
background-image: -moz-linear-gradient(red, yellow);
background-image: -ms-linear-gradient(red, yellow);
background-image: -o-linear-gradient(red, yellow);
background-image: linear-gradient(red, yellow);

2. Media query

Media query refers to based on the screen size of the device, resolution and other features to adapt to different devices. Using media queries to display different styles for different devices is the core idea of ​​responsive design.

When writing CSS code, we can use @media to add media queries. For example, the following code implements style adaptation for different screen widths:

/* 普通样式 */
p {
   font-size: 16px;
}

/* 屏幕宽度小于600px时的样式 */
@media (max-width: 600px) {
   p {
      font-size: 14px;
   }
}

/* 屏幕宽度大于600px且小于1200px时的样式 */
@media (min-width: 600px) and (max-width: 1200px) {
   p {
      font-size: 18px;
   }
}

/* 屏幕宽度大于1200px时的样式 */
@media (min-width: 1200px) {
   p {
      font-size: 20px;
   }
}

3. Feature detection

Feature detection refers to determining whether the current browser supports a certain CSS attribute or JavaScript API . Using feature detection, you can write code to ensure that it works correctly in different browsers. In addition to determining whether the browser supports certain CSS properties, you can also determine whether the browser supports certain events, methods, objects, etc.

When performing feature detection, we can use JavaScript code to determine whether the current browser supports a certain feature. For example, the following code uses the Modernizr library to detect whether the current browser supports the box-shadow attribute:

/* 如果浏览器支持box-shadow属性，则阴影效果生效 */
if (Modernizr.boxshadow) {
   div {
      box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
   }
}

4. Reset style

Reset style refers to the default style of different browsers Reset to ensure that styles are rendered consistently across different browsers. Different browsers may have very different definitions of default styles, so we need to reset these default styles to avoid being affected by the default styles when writing our own CSS code.

When resetting the style, we can use the normalize.css library to reset. This library has covered the default styles of most common browsers and also fixed some browser compatibility issues.

Summary

This article introduces four CSS-compatible writing techniques, including CSS prefixes, media queries, feature detection and reset styles. Mastering these techniques can effectively improve the browser compatibility of web pages and make the code easier to maintain and expand.

The above is the detailed content of css compatible writing method. For more information, please follow other related articles on the PHP Chinese website!