Maison > Article > interface Web > Les dernières propriétés CSS et API pour la conception Web en 2020
Les dernières propriétés CSS et API pour la conception Web en 2020
- WBOYavant
- 2023-09-08 14:53:011044parcourir
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 HoudiniUne 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> Sortie
Cela produira les résultats suivants -
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!