Les dernières propriétés CSS et API pour la conception Web en 2020-tutoriel CSS-php.cn

Les dernières propriétés CSS et API pour la conception Web en 2020

WBOY

Libérer： 2023-09-08 14:53:01

avant

1085 Les gens l'ont consulté

Pour aider les développeurs à personnaliser leurs sites Web à l'aide d'un mélange de JavaScript et de CSS, nous avons développé de nouvelles propriétés CSS qui prennent désormais en charge les navigateurs populaires. Certains d'entre eux sont répertoriés ci-dessous -

focus-within

Il vise à résoudre l'accessibilité du focus au sein d'un élément

scroll-snap

Cela permet le défilement et le ralentissement natifs

@media(prefers-*)

Aide à adapter le UI et UX de la page basés sur les préférences de l'appareil de l'utilisateur, permettant un niveau de personnalisation plus élevé.

* Peut représenter la luminosité, forcer la couleur, la palette de couleurs, le contraste, réduire le mouvement et réduire la transparence

Position : Collant

Pour. Gardez l'interface utilisateur dans la fenêtre.

Propriétés logiques avec disposition standard

nous permettent d'avoir un espacement directionnel dynamique à l'intérieur et autour des éléments.

propriété Gap

Cette propriété est maintenant disponible dans Flexbox. Gap définit le conteneur avec un espacement, plutôt que de donner à chaque élément enfant son propre espacement.

backfrop-filter

est utilisé pour styliser facilement l'arrière des éléments.

API CSS Houdini

Une API de bas niveau qui permet aux développeurs d'indiquer aux navigateurs comment ils souhaitent que les CSS personnalisés soient lus et compris. Les développeurs ont désormais un accès plus facile au modèle objet CSS. L'API Layout, l'API Paint, l'API Parser, l'API Properties & Values, AnimationWorklet, Typed OM et Font Metrics API entrent dans ce champ d'application.

Rapport d'aspect

Maintenir les dimensions du média

taille

Définir la hauteur et la largeur dans une seule propriété

min(), max() et clamp()

Définir des contraintes sur n'importe quelle propriété CSS

Affichage : extérieur intérieur

Syntaxe à double valeur pour mieux ajuster les éléments

list-style-type

Ajouter des styles personnalisés aux listes

Modules CSS

Nous pouvons désormais demander des modules spécifiques à partir de fichiers locaux ou distants en utilisant JavaScript

Zones CSS

Zone de remplissage avec du contenu

Sous-grille CSS

nous aide à créer une micro-mise en page en utilisant une micro-mise en page dans la grille CSS.

Exemple

L'exemple suivant montre certaines de ces propriétés -

Démonstration en direct

<!DOCTYPE html>
<html>
<head>
<style>
* {
   margin: 2%;
   text-align: center;
}
:is(header, main, footer) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:-webkit-any(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:-moz-any(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
:matches(header, div, section) span:after {
   content: " Awesome!";
   box-shadow: inset 0 0 8px lightgreen;
   font-size: 1.2em;
   font-family: Calibri;
}
</style>
</head>
<body>
<header>
<span>:is() operator is</span>
</header>
<div>
<span>DEMO</span>
<span>Alt + F4</span>
<span>Enter</span>
</div>
<section>
<span>Howzit?</span>
</section>
</body>
</html>

Copier après la connexion