问候。这是Rachel Andrew在2020年7月7日发布的2020年7月CSS News文章的翻译
最近，与以前相比，实现Web开发技术的新功能的速度已大大提高。本文包含一些新的CSS功能，这些功能已在现代浏览器中得到支持。如果您是不希望立即开始使用技术而又不喜欢阅读技术的开发人员，那么您可能不会对本文感兴趣。但是，如果您有兴趣知道不久的将来会遇到什么，现在在浏览器的Beta版中尝试一下，请继续阅读。
Flexbox的间隙
让我们从一个浏览器的发行版和其他浏览器的beta版中已经实现的内容开始。
在翻译时，所有现代浏览器均支持该文章（关于Safari尚不完全了解）
CSS Grid gap, column-gap row-gap , . column-gap .
grid- margin, gap , , grid- . flex- , , margin. , flex-, margin.
gap Flexbox, ? , – Firefox Chrome.
CodePen . flex- margin . flex-. flex- margin, margin . margin , gap: 20px, .
Mind the Gap
gap Flexbox . -, , Grid Layout, :
- grid-gap
- grid-row-gap
- grid-column-gap
, CSS Grid. (justify-content, align-content, align-items) Flexbox, Grid, gap CSS Grid.
, gap "Box Alignment". , . , , , "grid–".
grid–, . , .
"gap" Flexbox
, "gap" Flexbox, "Feature Queries" "margin". , , . , CSS Grid, :
@supports (display: grid) {
.grid {
/* grid layout code here */
}
} gap: 20px, Chrome, "gap" Flexbox, CSS Grid. , , , . Flexbox. CSS, .
, , . , . HTML- img video, ( ). , , , – . , , , , ( - , , ).
padding, , , "padding" . , .
"aspect-ratio" , . Chrome "Canary", , "Experimental Web Platform Features".
grid- "1 / 1". . , . .
Chrome Canary , , , , "1 / 1" .
Masonry
, CSS Grid Masonry Pinterest- . , CSS Grid, , Masonry .
, , Masonry. Masonry . , . , , , , , . JavaScript Masonry.
CSS Grid , , . , Grid .
CSS Grid Masonry ? Mozilla , . Firefox Nightly, URL- about:config layout.css.grid-template-masonry-value.enabled, true.
, JavaScript, , CSS Grid . "Does Masonry Belong In The CSS Grid Specification?".
Subgrid
subgrid grid-template-columns grid-template-rows Firefox. , . , display: grid , .
Firefox. , , . "Digging Into The Display Property: Grids All The Way Down" , Subgrid Grid-, "CSS Grid Level 2: Here Comes Subgrid" . , “Grid by Example”.
, , , Subgrid – " Chrome?". , , . 18 Chromium , Microsoft Edge ( Chromium) Grid Layout LayoutNG ( Chromium). Subgrid.
– , Microsoft CSS Grid IE10. -.
prefers-reduced-data
@media (prefers-reduced-data: reduce) {
.image {
background-image: url("images/placeholder.jpg");
}
}- "prefers_reduced_data" , 5 - , . , - "prefers_reduced_motion" "prefers_color_scheme" , CSS.
::marker
"::marker" . , . - , .
, "::marker" , . , "display: list-item" , emoji.
"::marker" Firefox Chrome Canary.
: "::marker" CSS Lists, Markers, And Counters
,
, . -, , . CSS . , , , , "::marker" Chrome Firefox -, ( How to file a good browser bug , ). , - , GitHub- CSS