Mises à jour CSS - juillet 2020 (espace, rapport hauteur / largeur, maçonnerie, sous-grille)

Salutations. Voici une traduction de l'article CSS News de juillet 2020 publié le 7 juillet 2020 par Rachel Andrew

Récemment, la vitesse de mise en œuvre des nouvelles fonctionnalités des technologies de développement Web a considérablement augmenté par rapport à ce qu'elle était auparavant. Cet article contient une sélection de nouvelles fonctionnalités CSS qui sont déjà prises en charge dans les navigateurs modernes. Si vous êtes un développeur qui n'aime pas lire sur la technologie si vous ne pouvez pas commencer à l'utiliser tout de suite, cet article peut ne pas vous intéresser. Cependant, si vous souhaitez savoir ce qui nous attend dans un très proche avenir et essayez-le maintenant dans la version bêta du navigateur, lisez la suite.

Gap pour Flexbox

Commençons par ce qui est déjà implémenté dans la version commerciale d'un navigateur et les versions bêta d'autres navigateurs.

Au moment de la traduction, l'article est pris en charge par tous les navigateurs modernes (on ne sait pas exactement sur 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