You can now play with these five new CSS features

Front end intelligence 2020-11-12 08:23:36
play new css features

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

this paper GitHub 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 :

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 :


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 :


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 .


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 :


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 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]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple