Home Web Front-end CSS Tutorial Detailed explanation of the classification of css hack and the three methods of css hack

Detailed explanation of the classification of css hack and the three methods of css hack

May 04, 2017 pm 05:36 PM

The full text is quoted from here, a great article

  • what
    Due to browsers from different manufacturers or different versions of a certain browser ( IE6~IE11, Firefox/Safari/Opera/Chrome, etc.) have different support and parsing of css. At this time, in order to obtain a unified page effect, we need to write specific css styles for different browsers or different versions. This process of writing corresponding css code for different browsers/different versions is called css hack.

  • how
    Because different browsers and browser versions have different support and parsing results for css, and css priority The impact on the browser display effect, we can apply different css according to different browser scenarios.

  • css hack classification
    has three forms of expression, cssattribute prefix method, selector prefix method, and IE conditional comment method .

    • Attribute prefix method (i.e. class internal hack)

    • Selector prefix method

    • IE conditional comment method
      css hack generally defines CSS that has a wide range of applications and strong recognition capabilities at the front.

  • css hack method one: conditional comment method (applicable to IE10 and below, IE10 and later will no longer support conditional comments)

    • gt: greater than, select the conditional version or above, excluding the conditional version.
      lt: less than, select the version below the conditional version, excluding the conditional version.
      gte: greater than or equal, select the conditional version or above, including the conditional version.
      lte: less than or equal, select the version below the conditional version, including the conditional version.
      ! : Select all versions except the conditional version, regardless of high or low.

    • Conditional comment attributes:

    • Example

         <!--[if IE]>
         <p class="p1">只在IE5、6、7、8、9下显示</p>
         <![endif]-->
         <!--[if ! IE]><!-->
         <p class="p5">非IE</p>
         <!--<![endif]-->
      Copy after login

      Common comment method in html script ##, the conditional comment method can only be recognized by IE browsers below IE10. For other browsers, they can only see a pair of closed Comments that don't work. For non-IE comments, note that there is a in it, which acts as a closed comment.

         <!--[if IE 6]>
         <p class="p2">只在IE6下显示</p>    
         <![endif]-->
         <!--[if gte IE 6]>
         <p class="p3">只在IE6以上版本</p>    
         <![endif]-->
         <!--[if ! IE 8]>
         <p class="p4">非IE8的的IE浏览器</p>
         <![endif]-->
      Copy after login
  • css hack method two: intra-class attribute prefix methodThe attribute prefix is ​​to add some attributes to the CSS style attribute name that are only available for specific browsers The hack prefix can only be recognized by the browser and has achieved the expected page display effect.
    The following discussion is about the hack method in standard mode

    • Rules

      *color: IE5.5, 6, 7
      +color: IE5. 5, 6, 7
      #color: IE5.5, 6, 7
      -color: IE5.5, 6
      _color: IE5.5, 6
      Among these, I like to use * and _
      color\0: IE8, 9, 10, 11 (not tested above 12) (Some places here say that OPEN also recognizes it, but I tested it and it doesn’t work, I don’t know)
      color\ 9: IE6, 7, 8, 9, 10 (11 is not supported)
      color\9\0: IE8, 9, 10 (others are not supported)
      \9\0 took the total set
      color :red!important;Increase the priority of this setting

  • css hack method three: selector prefix method

    • Rules

      @media screen\9{……} (only valid for IE6 and 7)
      @media \0screen{……} (only valid for IE8)
      @media \ 0screen\,screen\9{……} (valid for IE6, 7, 8)
      @media screen\0{……} (valid for IE8, 9, 10 only)
      @media screen and (min -width:0\0){……} (only valid for IE9 and 10)
      @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none){…… } (valid for IE10,11, the above has not been tested)

  • hack pros and cons

    Try to avoid using css hack, but in some cases, in order to consider the user experience, implement downward Compatible, use hacks only as a last resort. However, excessive use will cause confusion in the
    html document and increase the burden of management and maintenance.

    【Related recommendations】

    1.

    Free css online video tutorial

    2. c

    ss Online Manual

    3.

    php.cn Dugu Jiujian (2)-css video tutorial

    The above is the detailed content of Detailed explanation of the classification of css hack and the three methods of css hack. For more information, please follow other related articles on the PHP Chinese website!

    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    Notepad++7.3.1

    Notepad++7.3.1

    Easy-to-use and free code editor

    SublimeText3 Chinese version

    SublimeText3 Chinese version

    Chinese version, very easy to use

    Zend Studio 13.0.1

    Zend Studio 13.0.1

    Powerful PHP integrated development environment

    Dreamweaver CS6

    Dreamweaver CS6

    Visual web development tools

    SublimeText3 Mac version

    SublimeText3 Mac version

    God-level code editing software (SublimeText3)

    Analyze the usage and classification of JSP comments Analyze the usage and classification of JSP comments Feb 01, 2024 am 08:01 AM

    Classification and Usage Analysis of JSP Comments JSP comments are divided into two types: single-line comments: ending with, only a single line of code can be commented. Multi-line comments: starting with /* and ending with */, you can comment multiple lines of code. Single-line comment example Multi-line comment example/**This is a multi-line comment*Can comment on multiple lines of code*/Usage of JSP comments JSP comments can be used to comment JSP code to make it easier to read

    What are the classifications of artificial intelligence? What are the classifications of artificial intelligence? Feb 19, 2021 am 11:22 AM

    The classification of artificial intelligence includes cognitive AI, machine learning AI and deep learning. Artificial intelligence is a new technical science that studies and develops theories, methods, technologies and application systems for simulating, extending and expanding human intelligence.

    How to use neural networks for classification in Python? How to use neural networks for classification in Python? Jun 04, 2023 pm 10:40 PM

    When it comes to classifying large amounts of data, manually processing this data is a very time-consuming and difficult task. In this case, using a neural network for classification can do the job quickly and easily. Python is a good choice because it has many mature and easy-to-use neural network libraries. This article will introduce how to use neural networks for classification in Python. Neural Networks and Classification Before explaining how to use neural networks for classification, we need to briefly understand the concept of neural networks. Neural network is a

    Detailed explanation of Linux system log file classification Detailed explanation of Linux system log file classification Feb 26, 2024 pm 02:33 PM

    Linux system log files are important files that record various information generated during system operation. By analyzing log files, we can help us understand the operating status, troubleshooting, and performance optimization of the system. This article will deeply explore the classification and functions of Linux system log files, and combine it with specific code examples to help readers better understand. 1. Classification of Linux system log files 1. System log System log is a log file that records important events such as system startup, shutdown, user login, and shutdown. In Linux system

    What are the methods of time processing in Go language? What are the methods of time processing in Go language? Jun 10, 2023 pm 09:42 PM

    As a modern programming language, Go language plays an important role in development. The Go language provides some built-in time functions and structures to make time processing more convenient. In this article, we will introduce some commonly used time processing methods in the Go language. time.Now() We can use the time.Now() function to get the current time: now:=time.Now()fmt.Println(now) output: 2019-06-131

    How to use Gaussian mixture model for classification in Python? How to use Gaussian mixture model for classification in Python? Jun 04, 2023 am 10:10 AM

    This article will introduce the basic concepts and implementation methods of using Gaussian mixture models for classification in Python. What is a Gaussian mixture model? Gaussian Mixture Model (GMM) is a common clustering model, which is composed of multiple Gaussian distributions. When classifying data, these Gaussian distributions are used to model the data and determine each distribution in an adaptive manner. The category to which the sample belongs. The basic principle of GMM The basic principle of GMM is to treat the data set as a group of multiple Gaussian distributions

    Revealing the classification of basic data types in mainstream programming languages Revealing the classification of basic data types in mainstream programming languages Feb 18, 2024 pm 10:34 PM

    Title: Basic Data Types Revealed: Understand the Classifications in Mainstream Programming Languages ​​Text: In various programming languages, data types are a very important concept, which defines the different types of data that can be used in programs. For programmers, understanding the basic data types in mainstream programming languages ​​is the first step in building a solid programming foundation. Currently, most major programming languages ​​support some basic data types, which may vary between languages, but the main concepts are similar. These basic data types are usually divided into several categories, including integers

    Image classification example in Python Image classification example in Python Jun 10, 2023 pm 03:43 PM

    Python is a widely used programming language that is very popular in computer vision and image processing. In this article, we will explore image classification examples in Python. Image classification is a fundamental task in computer vision that involves identifying objects or scenes in images. This article will introduce how to use the deep learning framework Keras in Python to implement the training and prediction of image classification models. Preparation Before proceeding with image classification, we need to install the necessary software packages. Below is a list of necessary packages

    See all articles