Actualizaciones de CSS: julio de 2020 (brecha, relación de aspecto, mampostería, subcuadrícula)

Saludos. Aquí hay una traducción del artículo de CSS News de julio de 2020 publicado el 7 de julio de 2020 por Rachel Andrew

- , . CSS-, . , , , , . , , - , .

Gap Flexbox

, - .

( 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

– Chrome. CSS , , . , , .

@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