Css

What are the ways to optimize and improve CSS performance?

  • Avoid over-constraining
  • Avoid descendant selectors Avoid chain selectors use compact syntax
  • Avoid unnecessary namespaces
  • Avoid unnecessary repetition
  • It is best to use semantic names. A good class name should describe what it is, not what it looks like
  • Avoid!!! Important, you can select other selectors
  • Simplify rules as much as possible. You can combine duplicate rules from different classes

Scss is recommended, which is faster than Less

The difference between link and @import in the CSS

@import is a syntactic rule provided by CSS that only imports stylesheets; Link is an HTML-provided tag that not only loads CSS files but also defines RSS, REL connection properties

  • To load a page, the CSS imported by link is loaded at the same time, and the CSS imported by @import is loaded after the page is loaded.
  • @import is a CSS 2.1 syntax that was not recognized before IE5
  • You can manipulate the DOM with JS to insert the link tag to change the style; Because DOM methods are document-based, you cannot insert styles using @import.

CSS selector list priority weight

The selector chestnuts
ID #id
class .class
The label p
attribute [type=’text’]
pseudo-classes :hover
Pseudo elements ::first-line
Adjacent selector, child selector > +
  • Inline style, such as: style=”…” , the weight is 1000.
  • ID selector, such as #content, has a weight of 0100.
  • Class, pseudo class, property selector, such as.content, weight 0010.
  • Type selectors, pseudoelement selectors, such as div P, have a weight of 0001.
  • Wildcards, child selectors, adjacent selectors, etc. For example, * > +, the weight is 0000.
  • Inherited styles have no weights

Common inheritable CSS properties

Font-size: 16px; font-family: arial, sans-serif, sans-serif, sans-serif

Text-align: align the text horizontally with line-height word-spacing: spacing between words The text-transform controls the uppercase, capitalize, and capitalize of the text

3. Element visibility: Controls the display and hiding of elements

List-style: list style, including list-style type, list-style image, etc

5. Cursor properties CURSOR: What shape is the cursor displayed

What’s new in CSS3

  • Border – the radius: rounded corners
  • The box – shadow: the shadow
  • Text-shadow: text effect
  • Gradient: linear gradient
  • Transform: rotate(9deg) Scale (0.85,0.90) Translate (0px,-30px) skew(-9deg,0deg); transform: rotate(9deg) scale(0.85,0.90) Translate (0px,-30px) skew(-9deg,0deg); // Rotate, scale, position
  • Rgba: Multi-background
  • ::selection: media query
  • Border-image: indicates the image border

CSS3 new pseudo class:

CSS3 new pseudo-class example: p:first-of-type Selects each element that belongs to the first element of its parent element. P :last-of-type Selects each element belonging to the last element of its parent element. P :only of type Selects each element that belongs to an element unique to its parent element. P :only-child Selects each element that belongs to the only child of its parent element. P :nth-child(2) selects each element that belongs to the second child of its parent. :enabled :disabled Controls the disabling status of form controls. : Checked check boxes or check boxes are selected

Batch change styles

/* use cssText */
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 20px';
Copy the code

CSS expressions use one-time expressions (but it’s best to avoid CSS expressions)


// css
p{
    background-color: expression(altBgcolor(this))}// js
function altBgcolor(el){
    el.style.backgroundColor = (new Date()).getHours() % 2 ? "#fff" : "#06c";
}
Copy the code

Triangular arrowheads

.triangle{
    width:0px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    border-bottom:20px solid # 000;
}
Copy the code

Length-width ratio scheme:

.aspectration[data-ratio="16:9"] {
    padding-top: calc(100% * 9 / 16);
}
Copy the code

Aspect-ratio (plug-in required)

Remove the floating

 /* Method 1: clear the floating code */
.clearfloat:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0
}
.clearfloat{zoom:1}


/* Method 2: Cannot be used in conjunction with position, because the size beyond the position will be hidden */
.clearfloat{
    overflow:hidden;
}
Copy the code

BFC stands for Block Formatting Contexts

Elements with BFC characteristics can be viewed as separate containers, the elements inside the container do not affect the layout of the elements outside, and BFC has some characteristics that normal containers do not have.

BFC features can be triggered:

  • Body root element
  • Float element: float a value other than None
  • Absolute position elements: Position (Absolute, fixed)
  • Display inline-block, table-cells, flex
  • Overflow values other than visible (hidden, auto, Scroll)

Make the font on the page clear

When used in IOS, antialiased and grayscale smoothing is not available in the Windows system

The box model

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content. The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

  box-sizing: content-box|border-box|inherit:
Copy the code
  • Content-box: this is the behavior of the width and height specified by CSS2.1. Specify the width and height of the element (min/Max attributes) for the width and height of the box. Element padding and border layout and drawing except for specified width and height
  • Border-box: Specifies the width and height (minimum/maximum attributes) to determine the border of the element. That is, specifying the width and height of an element includes both the padding and the border. The width and height of the content are obtained by subtracting the border and inner margin from the specified width and height, respectively.
  • Inherit: Specify the value of the box-sizing property, which should be inherited from the parent element

The difference between standard box model and IE box

Once you’ve set up an appropriate DTD for your page, most browsers will render the content as illustrated above. However, the rendering of IE 5 and 6 is incorrect. According to the W3C specification, the space occupied by the content of an element is set by the width property, while the padding and border values around the content are calculated separately. Unfortunately, IE5.x and 6 use their own non-standard models in weird mode. The width property of these browsers is not the width of the content, but the sum of the width of the content, the padding, and the border.

There are ways around this, though. But the best solution for now is to duck the problem. That is, instead of adding an inner margin of a specified width to an element, try adding an inner margin or a margin to the element’s parent and child elements.

Internet Explorer 8 and earlier versions do not support setting the width of the fill and border width properties.

Middle implementation

  • line-height

  • The child position: absolute; // Left, high 50% each,

    • The child height is then moved back by 50% of the width height of the element via margin
    • Transform: translate(-50%, -50%);

  • Position: Absolute; Left,right,bottom,top are all 0, margin:atuo;

  • By setting Up Flex for the parent

  • Parent display:table, child display: table-cell; vertical-align: middle;

  • Parent display:grad, child :margin: auto; Not recommended because of poor compatibility

  • By setting before to the parent

  .ghost-center {
    position: relative;
    border: 1px solid blue;
    height: 400px;
  }
  
  .ghost-center::before {
      content: "";
      display: inline-block;
      height: 100%;
      width: 1%;
      vertical-align: middle;
  }
  
  .ghost-center>.content {
      display: inline-block;
      vertical-align: middle;
      width: 20rem;
  }
Copy the code

animation

  • transform:

    • Scale equal scale, scale(x, y), scaleX(), scaleY() can use negative numbers, effect: slender font, font inversion
    • Skew tilt unit: degress (degree) transform: Skew (100DEg,100deg) grad (percentage) transform: Skew (10grad,10grad) rad (radian) A complete circle is 2π transform: skew(10rad,10rad) turn a complete circle is 1turn transform: Skew (0.25turn, 1.2turn) can be negative
    • Rotate Is the same as skew, and rotate(n) is equal to rotateX(n), totateY(n), rotateZ(n), and rotate3D (x,y,z, Angle).
    • Translate (x,y), translateX(n), translateY(n)

  • Transition: transition: property-color duration timing-function; The transition: height 0.3 s ease;

    • Transition-property: Specifies the transition property
    • Transition-duration: transition duration
    • Transition-delay: indicates the delay time before the transition starts. The unit is s or ms
    • Transition-timing-function: specifies the timing of the animation motion

  • Animations: Used to specify one or more groups of animations, separated by commas, that support IE10 +

    • Animation-name: Specifies a series of animations for the application, each name representing a series of animations defined by @keyframes
      .anim{
    animation-name:jump;
  }
  @keyframes jump{
    form{
      top: 100;
    }
    to{
      top: 0}}Copy the code
    • Animation-duration: specifies the duration of the animation cycle. The default value is 0
    • Animation-rotund-count: defines the number of times an animation is run. By default, an animation is run once. If the value is infinite, it is an infinite loop
    • Animation-direction: indicates the direction of animation playback
    • Animation-timing -function: this function is used for each animation cycle. It is used for one keyframe cycle instead of the entire animation cycletransition-timing-function

GPU acceleration is enabled for the CSS

-webkit-transform: transition3D (0,0,0) or -webkit-transform: translateZ(0); Both of these attributes enable GPU hardware acceleration mode, which allows the browser to switch from THE CPU to the GPU when rendering animations. -webkit-transform: transition3D and -webkit-transform: translateZ are used to render a 3D style, but when we set the value to 0, we don’t use the 3D effect. But the browser turned on GPU hardware acceleration.

GPU hardware acceleration may trigger the following problems:

  • The browser may blink or jitter frequently. Try the following methods to resolve the problem: 
    -webkit-backface-visibility:hidden; 
-webkit-perspective:1000;
Copy the code

css Hack

For different browsers to write not CSS, is a CSS Hack

  • Conditions Hack

    Only in IE <! --[if IE]> <! [endif]--> Only works with IE6 <! --[if IE6]> this text is only displayed in IE6 <! [endif]--> Only works with IE6 or later <! --[if gte IE6]> <! [endif]--> Does not work on IE8 <! --[if! IE8]> <! [endif]--> Non-IE <! --[if!IE]> this text is only displayed in non-IE browsers <! [endif]-->Copy the code

  • Attribute level Hack

    hack writing The 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
    \ 0 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

  • Selector hacks are most common

    * HTML * prefix only for IE6 *+ HTML *+ prefix only for IE7 @media screen\9{... } @media \0screen {body {background: red; }} only for IE8 @media \0screen\,screen\9{body {background: blue; }} @media screen\0 {body {background: green; @media screen and (min-width:0\0) {body {background: gray; }} @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body {background: orange; }} applies only to IE10Copy the code

The difference between PX and EM

Px and em are both units of length. The difference is that the value of px is fixed, so it is easy to calculate. Em values are not fixed, and EM inherits the font size of the parent element.

The default font height for all browsers is 16px. So all untuned browsers fit: 1em=16px. So 12 px = 0.75 em, 10 px = 0.625 em