CSS practice is essential to note (1) - CSS foundation Supplements

一、box-decoration-break

　　CSS3 new box-decoration-break property may be alternatively non-specified elements in the interbank line, column or cross pattern across the page during rendering, it contains two values:

　　(1) slice: the default value, the box will be divided into multiple portions.

　　(2) clone: ​​individual box renders disconnected individually.

　　The following demonstrates with an example the difference between the two, the first default value span element box-decoration-break, the effect as shown in the first graph, the left and right margins and no line breaks at a fillet; the second the span element box-decoration-break value clone, results as shown in FIG second, note that in the Chrome browser to add the attribute prefix.

<style>
  span {
    border-radius: 10px;
    padding: 0 10px;
  }
  span.clone {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
</style>
<div>
  <span>测试CSS属性，box-decoration-break:slice</span>
</div>
<div>
  <span class= "clone" > test CSS property, Decoration-BREAK-Box: clone </ span > 
</ div >

 

　　box-decoration-break may affect the CSS properties background, border, border-image, box-shadow, border-radius, clip-path, margin, and padding.

Two, contents

　　When the CSS property display element is defined as the contents, it will disappear, does not participate in a formatted page, but does not hide the child elements.

　　Below an example two elements ul, ul element comprises a first set of borders, and the default width of the margin and a mark list items, the first effect is as shown in FIG; ul element of the second group have no previous style , the effect as shown in the second map.

<style>
  ul {
    border: 1px solid #000;
    width: 100px;
  }
  ul.contents {
    display: contents;
  }
</style>
<ul>
  <li>Strick</li>
  <li>Freedom</li>
  <li>Justify</li>
</ul>
<ul class="contents">
  <li>Strick</li>
  <li>Freedom</li>
  <li>Justify</li>
</ul>

  

　　Note that the browser will remove all display contents defined as accessibility element, which causes the element and its subsequent elements are no longer reading screen technology access.

Third, the count mode

　　@ Counter-style is a CSS statement, define the counting mode, that is, modify counter style, which make up the scene of those built-counting mode difficult to adapt. Note, however, currently only supports the Firefox browser can perfect @ counter-style.

　　Each @ counter-style consists of a name and a set of descriptors, descriptor that can be used as listed in the table.

Descriptor	Explanation
system	Algorithm specified count, i.e., the counter mode of the system, including optional value fixed, cyclic, symbolic, alphabetic, numeric, additive and extends
symbols	Designation sign, can be a string, an image identifier, etc., in addition to the additive and extends two algorithms, needs this descriptor
additive-symbols	Sign algorithm is specified for the additive
negative	When the counter indicates a negative value, the value of the symbol on both sides
prefix	As prefix notation
suffix	As a sign suffix
range	Limit the scope of the counter force, when the value is not in this range, the use alternate counting algorithm
fallback	When not using a custom algorithm count range or beyond the scope of the definition, the use of the reserve algorithm
pad	The minimum length of mark and filled symbols are as defined
speak-as	Designated counter in the voice recognition system pronunciation Strategy

1）system

　　There are five algorithms easier to understand the system descriptor, are listed below.

　　(1) fixed: after traversing a specified mark to restore the original counting mode.

　　(2) cyclic: cyclic traverse the specified token.

　　(3) symbolic: the cyclic similar, but each cycle will be superimposed a mark.

　　(4) alphabetic: symbolic and is similar to, but different repeating manner, symbols can be interpreted as a number, it is converted to the lettering system.

　　(5) numeric: alphabetic and similar, but also by using the system bit count, but the first markers from a start position, but not 0.

　　Effect of five algorithms shown below, CSS code shown below, because the code are relatively similar, so only given fixed.

@counter-style fixed-digits {
  system: fixed;
  symbols: ① ②;
}
ul {
  list-style: fixed-digits;
}

2) extended count mode

　　It extends system descriptor can be adjusted for the conventional counting system, for example, the following digits are filled with zeros for each symbol, and colon added as a suffix.

@counter-style digits {
  system: numeric;
  symbols: "0" "1" "2";
}
@counter-style mydigits {
  system: extends digits;
  suffix: "：";
  pad: 3 "0";
}
ul {
  list-style: mydigits;
}

Fourth, the custom properties

　　Custom attributes (custom property) is not a special new CSS properties, but CSS declare a variable, it "-" prefix. If the CSS to define global variable may be declared to: root pseudo-class, as shown below. Note that custom property may be declared in any selector.

:root {
  --orange-color: #F60;
}

　　Custom properties by reference to var () function, the first parameter is the name of the custom property, the second parameter value is a backup, as shown below.

p {
  color: var(--orange-color, #FC0);
}

　　While Sass, Less preprocessor these variables has been provided, but the custom properties with these, its advantage is real-time. Because its value is calculated by the browser, and the pre-computed in advance processor.

　　If you want to experience the custom properties, but also worried about browser compatibility, you can try @supports statement query properties, may include a plurality of detection conditions, the media query syntax is similar. When running does not support custom properties in the browser the following piece of CSS, @ supports the statement in the block will be skipped.

@supports (--orange-color: #F60) {
  p {
    color: blue;
  }
}

Five color keyword

1） transparent

　　In CSS, transparent keyword is equivalent rgba (0,0,0,0). When the attribute value as the background (see below), only the background elements made transparent, the contents can display elements. And opacity: 0 different, elements will Opacity and content as a whole, is defined as 0 when both are transparent.

P { 
  background : transparent ; 
} / * different * / 
P { 
  Opacity : 0 ; 
}

2）currentColor

　　This keyword indicates that the calculated value of the color attribute of the current element. In the following example, p is a child of the div, p, because the color attribute inherited from div color attribute, so currentColor value # F60.

div {
  color: #F60;
}
div > p {
  background: currentColor;
}