编程知识 cdmana.com

You can now play with these five new CSS features

author : Anna Monus
translator : The front end little wisdom
source :blog.logrocket
Enjoy it , Develop habits

this paper GitHub https://github.com/qq44924588... I have included , More categories of previous high praise articles , I've also compiled a lot of my documents , And tutorial materials . welcome Star And perfection , You can refer to the interview site review , I hope we have something .

Everyone said that there was no project in the resume , I helped you find a project , There is also a bonus 【 Set up a tutorial 】.

Recently, we open source a Vue Components , It's not perfect , Welcome to improve it together , I hope you can give me a star support , Thank you .

github Address :https://github.com/qq44924588...

Before browsers start implementing them ,CSS New features usually take a long time to discuss , Only then W3 The alliance's specification defines . There's a lot to mention CSS new function , But in this article , We focus on five features that can be tested in the stable version of the browser :

  1. CSS Subgrid ( Sub grid )
  2. flex gaps
  3. content-visibility attribute
  4. contains-intrinsic-size attribute
  5. :is and :where pseudo-classes

Browser support for these features has been changing , Can pass Can I Use To see support .

1.CSS Subgrid

CSS Grid is a flexible layout module , Allow developers to create complex layouts , No need to use JavaScript Or use complex CSS hack.

Use CSS Grid syntax is very simple , As shown below :

.grid-container {
    display: grid;
}

You can use several grid specific properties to set the exact layout you want .

for example , In the example above ,.grid-container The child elements of will be grid items , They will be based on the use of grid-template-columns and grid-template-rows Belong to The rules of sex definition are laid out :

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 50px 70vh 50px;
}

The operation results are as follows :

clipboard.png

however , If you want to include .grid-container Some of the ( Or all ) What about descendant elements ? This is it. CSS Subgrid Where it works .

You can add the following rules to the grid project , To enable it to adopt its parent's grid orbit ( Include names, gridlines and areas , Even it can define its own grid trajectories and regions ).

.grid-item {
    /*  These rules specify the location of the subgrid in the layout */
    grid-column: 2 / 4;      /*  Two columns are vertical  */
    grid-row: 1 / 3;         /*  Two line level  */

    /*  These rules belong to the subgrid itself  */
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

grid-column and grid-row Property defines the location of the grid item in the grid column or row . .grid-item The child elements of will form a subgrid . A grid project can span multiple grid cells . for example , Here it's distributed over four pixels ( In the example above grid-column and grid-row The value of is arbitrary ).

As mentioned to see ,subgrid It's not independent CSS attribute , It can be added to grid-template-columns and grid-template-rows The value of the property . It makes .grid-item The children of are contained in the grid layout :

clipboard.png

Subgrids have become part of the grid layout , And it's located exactly where we want to be ( Between the second and fourth vertical gridlines , And between the first and third horizontal gridlines ).

The rest of the grid projects maintain normal grid flow , The fourth line also appears at the bottom of the layout . however , Because we only use grid-template-rows Attribute defines three lines , So the fourth line has no default value , So just take the natural height of its content . If we want to remove text from the last three grid projects , Then they don't even show , Because their natural height is 0.

You can use the following CodePen Demonstrate to test the example above .

We can also do this by just using grid-template-columns or grid-template-rows And create a one-dimensional sub grid with the new values for the other .

for example , In the following cases , The subgrid uses only the columns of the main grid , But create new rules for rows

.grid-item {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: 200px 400px 200px;
}

Browser support

since 2020 year 8 Month begins ,CSS Subgrid specification Has become W3C Candidate recommendation criteria for . at present ,Firefox 71+ Only this subgrid specification is supported , But open source Web browser Chromium And it's been used , The browser is used as the main browser ( Include Chrome,Opera, Brave, And the new Microsoft Edge.

2. Flexbox gaps

For a long time , stay felx In the layout That's ok or Column Adding gaps between them has always been a problem . Usually it can be done through flex Add to the project margin To solve the problem , however margin The problem is , They will also be added to each That's ok or Column The beginning and end of . Even though it can be done through CSS To solve these defects , But it's not the ideal solution either .

at present , The browser to flexbox gap Support is getting better and better . gap,row-gap and column-gap Attributes exist in different contexts , There are different levels of browser support . We can use it in the following layout modules gap attribute .

  • Statement display: flex; Module
  • Statement display: grid; Module
  • Multi column layout , from column-count or column-width Attribute definitions

stay flexbox In the context of , We can state here that flex The gap before the project :

.flex-container {
  row-gap: 10px;
  column-gap: 15px;
}

gap The attribute is row-gap and column-gap Abbreviation . If you use it with two values , The first one means row-gap, The second means column-gap.

.flex-container {
  gap: 10px 15px;
}

If only one value is used , be row-gap and column-gap The same value will be used .

.flex-container {
  gap: 10px;
}

Browser support

Edge 84+,Firefox 63+,Chrome 84+ and Opera 70+ The current support gap attribute . Internet Explorer and Safari It's not supported yet .

3. content-visibility attribute

stay Chromium 85 in ,content-visibility Properties are probably the most influential new in improving page loading performance CSS One of the attributes . because content-visibility You can skip rendering content that is not on the screen , Including layout and rendering , Until you really need layout rendering . So using it can make the initial user load faster , It can also interact more quickly with the content on the screen .

It has three values :

  • visible — Element rendering works normally
  • hidden— When skipping element rendering , Whether it's off the screen or on the screen
  • auto — When the element is off screen , Will skip its rendering ; When it appears on the screen , Will render automatically

I can simply put content-visibility Attribute to the element whose rendering process we want to change .

article {
  content-visibility: auto;
} 

One has content-visibility: auto Attribute can get the layout 、 Restrictions on style and drawing ( Area ). If the element is not on the screen ( And it has nothing to do with the user , Then the relevant element will be the element with focus or selected in its subtree ), It also gets a size limit (containment)( And stop drawing and hit testing its contents ).

What does that mean ? In short , If the element is not on the screen , It doesn't render its descendants . The browser determines the size of an element without considering any of its contents , Skip most renderings here ( For example, the style and layout of the element subtree ).

When the element is close to the viewport , The browser no longer increases the size limit , Instead, it starts to draw and hit the content of the test element . This allows the rendering work to be seen by the user in time .

Browser support

content-visibility Depend on CSS Containement Spec The original language in (primitives). Although so far only Chromium 85 Chinese support content-visibility attribute (and deemed "worth prototyping" for Firefox), But most modern browsers support Containement Spec.

contain-intrinsic-size attribute

contains-intrinsic-size Property defines the explicit width and height of the element that activates the size limit , This means that the size of the element is not affected by the size of the child element . Setting clear width and height is designed to prevent these elements from collapsing to zero in some cases

In order to achieve content-visibility The potential benefits of , Browsers need to apply size restrictions , To ensure that the rendering of the content does not affect the size of the element in any way . If the element does not have the height specified in the regular block layout , Then its height is 0.

It may not be ideal , Because the size of the scroll bar changes , This depends on each content with a non-zero height .

therefore , CSS Another property is provided contains-intrinsic-size, If the element is affected by size restrictions , It can effectively specify the natural size of an element .

article {
  content-visibility: auto;
  contain-intrinsic-size: 700px 1000px;
} 

Browser support

at present Chrome 83+, and Support contains-intrinsic-size` attribute , Firefox I won't support it .

5.:is and :where pseudo-classes

:is() CSS pseudo-classes Function takes a selector list as an argument , And select the elements that any selector in the list can select . This is useful for writing large selectors in a more compact form .

:where() CSS A pseudo class function takes a selector list as its argument , All elements that can be selected by any rule in the selector list will be selected .

:where() and :is() The difference is that ,:where() The priority of is always 0 , however :is() The priority of is determined by the highest priority selector in its selector list .

for example , Here's a list of selectors :

.my-class p em,
.my-class li em,
.my-class section em {
    // CSS rules
}

If you want to keep a high priority , To make it more difficult to override the rules with subsequent declarations , You can use :is() Shorten list .

.my-class :is(p, li, section) em {
  // CSS rules
}

If we want to keep the priority at 0 In order to facilitate the rewriting of the rules , Then you can use :where()

.my-class :where(p, li, section) em {
  // CSS rules
}

In the example above ,.my-class em The selector will override :where The rules , But it won't cover :is.

Browser support

:is Pseudo classes are currently Firefox 78+ and Safari 14+ Support . be based on Chrome Browser (Chrome 15+、Edge 79+、Opera 15+) Use :-webkit-any() Prefixes support their prefix Syntax . You can also enable this feature by setting experimental web platform feature flags : stay Chrome 68+Opera 55+ and Edge 79+ Choose .

:where There is less support for pseudo classes . at present , Only Firefox 78+ Support it .

summary

at present , At present, it is necessary to use cautiously the CSS new function . Ideally , Use the prefixed version , Or wait until they are more widely implemented .

however , If you want to test , You can use content-visibility and contains-intrinsic-size attribute . You can optimize performance in browsers that already support this feature ( have access to @supports Rule test browser supports ), And it doesn't affect browsers that don't support it yet .

To make a long story short ,CSS The standardization and implementation of new features deserve our constant attention . There are many useful features that will eventually make front-end development easier and faster .


Possible after code deployment BUG There's no way to know in real time , In order to solve these problems afterwards BUG, It took a lot of time log debugging , This way, I'd like to recommend an easy-to-use one for you BUG Monitoring tools Fundebug.

original text :https://blog.logrocket.com/5-...

communication

Articles are updated every week , You can search by wechat 「 The big move the world 」 First time reading and urging ( One or two articles earlier than blog ), this paper GitHub https://github.com/qq449245884/xiaozhi Included , I organized a lot of my documents , welcome Star And perfection , You can refer to the interview site review , Pay attention to official account. , The background to reply welfare , You can see the benefits , You'll see .

版权声明
本文为[Front end intelligence]所创,转载请带上原文链接,感谢

Scroll to Top