preface
Hello everyone! I’m front-end nameless
background
Recently in the CSS new world, for busy writing business I, harvest a lot. CSS compatibility is not considered in this article.
@supports
@supports is a common @ rule in CSS that can be used to check whether the current browser supports a CSS feature.
Requirements: For browsers that do not support Animation, use GIF animations. For browsers that support animation, use animations. Ps: Does not consider @supports compatibility (IE10 and IE11)
.loading{
width:10px;
heigth:10px;
background:url(./loading.gif); } // Check whether support is supportedanimationProperty, support increases animation effects@support (animation:none) {
.loading{
width:10px;
heigth:10px;
background:url(./loading.png);
animation: spin 1s linear infinite;
}
@keyframes spin{
from { transform: rotate(360deg); }to {transform: rotate(0deg); }}}Copy the codeFor example: Use position:sticky to achieve scrolling and sticky effect, traditional browsers use JS support.
CSS. Supports (propertyName,value)
if(!window.CSS || ! CSS.supports || ! CSS.supports('position'.'sticky') {//TODO
}
Copy the codefit-content
We can understand the size of content. If content is thighs, then fit-content is leggings.
Need: horizontal center text with little text, left aligned text with multiple lines (crap requirement, but I did encounter it).
// Traditional implementation.content{
display:table;
margin:auto; } // If the element is inline.content{
display:inline-block;
margin:auto;
}
// fit-contentimplementation.content{
width:fit-content;
margin:auto;
}
Copy the codeFit – content advantage
- If the original display calculation value of the element is protected, for example, if the li tag is set to display:table, the bullet in front will not appear, and the pseudo-element ::marker will also be invalid.
- Gives the element size a definite value.
For the second point let the element have a certain value, our application scenario. For example, we use the absolute layout and use margin: Auto to achieve the center effect, requiring us to set the specific with or height property value.
.test2-center{
position: absolute;
width: 300px;
height: 200px;
background: red;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
Copy the codeSometimes when we’re not sure about width,height, we use transform to center it
.test3-center{
position: absolute;
left: 50%;
top: 50%;
background: red;
transform: translate(-50%, -50%);
}
Copy the codeIn this case, if we need to add a displacement animation to test3-Center
@keyframes move{
from { transform:translateY(5px); }to { transform:translateY(0); }}Copy the codeAt this point our Transform will be disturbed by the displacement animation.
A better approach is to use our fit-Content, so that we have a certain width and height and center it.
.test3-center{
position: absolute;
width:fit-content;
height:fit-content;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
animation: move .2s;
}
Copy the codeborder-image
The action process of the border-image attribute is divided into two points:
- Partition of source image (nine grids)
- 9 grid size control
Border-image member composition:
- Border-image-source // image resource
- border-image-slice
- border-image-width
- border-image-outset
- border-image-repeat
Border-image application scenario: The designer gave us a background image of the list. The four corners of the background image had different small patterns, and the middle area could be stretched. Since the height of the list was not fixed, we could not determine the height of the background, so we had to rely on content filling, which required our background stretching. The four corners do not deform and the middle area is stretched. At this point our border-image is ready to appear.
Border-image is similar to the.9 image commonly used in Android.
The following example uses the source image as follows:
Scratchable latex
Border-image partition is as follows:
Border-image applies the grid to the source image.
border-image-slice
/ / grammarborder-image-slice: <number-percentage>{1.4} && fill?
Copy the codeThe value can be 1 to 4 values or 1 to 4 percentages. The value is followed by the fill keyword, which is optional. Border-image-slice divides source images in the following directions and order: up, right, down, and left.
For example, border-image-slice:100 indicates 100px above the source image, 100px to the right, 100px below the source image, and 100px to the left of the source image. In this case, corners 1,2,3, and 4 are fixed and other areas are stretched.
.test5 {
position: relative;
width: 400px;
height: 300px;
border: 50px solid red;
border-image-source: url("./bg1.png");
border-image-slice: 100;
}
Copy the code
Note here that border-image-slice simply partitions the source image. The specific width of the border depends on the border-width or border-image-width.
The border attribute must precede the border-image attribute; otherwise, the border-image attribute is invalid.
Border-image-slice can only be a number or percentage, and cannot contain units (px).
By default, the center of the source image (position 9) does not participate in filling. To fill the effect, use the fill keyword.
border-image-slice:22% fill;
Copy the codeborder-image-width
Both border-image-width and border-image-outset control the size of the nine grid.
The number of attributes supported by the border-image-width attribute is the same as that supported by the border-image-width attribute. The number of attributes supported by the border-image-width attribute is 1 to 4, and the corresponding direction is the same, but the value type is different.
The border-image-width property supports a value as an attribute value, which is multiplied by the width of the border-width as a coefficient. The final calculated value is used as the border width.
If the border-image-width attribute is a specific length (30px, 20rem), then the border-image-width does not matter at all. < span style = “border-width: 0; border-image-width: 0; border-image-width: 0; border-image-width: 0; border-image-width: 0; border-image-width: 0; Set border-width to 0.02px;
Border-image-width is a percentage and is calculated relative to the size of the element itself. The horizontal direction is relative to the width and the vertical direction is relative to the height.
Border-image-width Set to auto. The size delimited by the border-image-slice attribute is used as the length value of the nine squares. (recommended)
Border-image-width and border-width do not support negative values.
Border-image-width controls the size of the region 1-8.
border-image-outset
Border-image-outset controls the size of the centre area (area 9). Attribute values of four directions are also supported.
.test5{
border-image-source: url("./bg1.png");
border-image-outset: 20px;
}
Copy the codeThis is the area in the center of the element (area 9) that has been enlarged by 20px left, right, up and down, so the width of area 9 is: area 9’s original width +40px, and area 9’s original height +40px
border-image-repeat
Border-image-repeat controls the tiling rules for the images in areas 5-8.
.test5{
border-image-source: url("./bg1.png");
border-image-repeat: stretch; // Default to fill the entire display area with the source image.border-image-repeat: repeat; // Make the source images close together, truncating the image at the boundary position.border-image-repeat: round; // Make the source image gold linked, appropriate scaling, border position does not truncate the image, the full display of the image.border-image-repeat: space; // Keep the source image at its original size, leave the middle area equal width blank, tile the image, and display the image completely at the border position. }Copy the codeAfter the language
Your comments are welcome. Give it a thumbs up! Comments are welcome.