10 nouvelles techniques CSS étonnantes

C'est une période très excitante pour devenir développeur Web. Nous allons jeter un œil à certaines des nouvelles propriétés CSS et des spécifications entières qui font leur chemin dans les navigateurs. Certains d'entre eux sont derrière des indicateurs ou uniquement disponibles dans les versions bêta des navigateurs maintenant, mais vous les verrez dans les versions de sortie très bientôt.

Pas un concepteur Web aussi accompli? Essayez un Générateur de site Web . Et si vous avez besoin d'aide pour maintenir votre site, une hébergement Web le service fera des merveilles pour vous.

Gouttières pour Flexbox

Les navigateurs mettant en œuvre les propriétés d



Les navigateurs mettant en œuvre les propriétés d'espacement pour Flexbox signifieront la fin de l'utilisation des marges et des marges négatives pour créer des gouttières

CSS Grid Layout a introduit le grille-colonne-espace , grid-row-gap et écart de grille Propriétés. La disposition multi-colonnes avait déjà écart de colonne . Il était donc logique de supprimer ces propriétés des spécifications Grid et Multicol et de les placer dans Box Alignment, la spécification qui traite de la distribution et de l'alignement de l'espace dans toutes les spécifications. Cela signifiait les propriétés de l'écart - maintenant renommées écart de colonne , écart de ligne et écart pour tous les contextes peut être spécifié pour d'autres méthodes de mise en page, telles que Flexbox.

Au moment de la rédaction de cet article, Firefox est le seul navigateur à avoir implémenté ces propriétés pour Flexbox et elles devraient être livrées dans Firefox 63 (qui devrait être disponible au moment où vous lirez ceci). Cependant, je m'attendrais à ce que d'autres navigateurs emboîtent le pas. Cela devrait signifier qu'au lieu d'avoir à utiliser des marges pour créer des gouttières entre les éléments flexibles, vous pourrez utiliser des espaces comme dans la disposition de la grille.

.flex { display: flex; flex-wrap: wrap; row-gap: 20px; column-gap: 10px; }

Propriétés et valeurs logiques

En utilisant les tailles logiques block-size et inline-size au lieu de la largeur et de la hauteur, la boîte pivote pour correspondre à la direction d

Utilisation des tailles logiques taille de bloc et taille en ligne au lieu de la largeur et de la hauteur, la boîte pivote pour correspondre à la direction d'écriture

Nos propriétés et valeurs CSS ont traditionnellement été mappées aux propriétés physiques d'un écran. Par exemple, nous utilisons la largeur et la hauteur et nous définissons des marges en haut, à droite, en bas et à gauche d'un élément. Ces propriétés physiques semblent étranges lorsque vous travaillez dans des modes d'écriture autres que horizontal et de haut en bas. À titre d'exemple simple, nous pouvons penser à une boîte avec à la fois une hauteur et une largeur.

.box { height: 150px; width: 250px; }

Notre boîte mesurera 150 pixels de haut sur l'écran et 250 pixels de large. Même si nous changeons le mode d'écriture en mode vertical, la boîte restera liée à ses dimensions physiques.

Nous avons maintenant de nouvelles propriétés et valeurs logiques qui nous permettent de dimensionner les éléments ou de faire référence à leurs marges, leur remplissage et leurs bordures d'une manière qui a du sens même si le mode d'écriture change. Si nous revenons à notre exemple précédent, nous pourrions vouloir que notre boîte ait toujours une longueur de 250 pixels dans la dimension en ligne quelle que soit l'orientation.

La dimension en ligne est la façon dont une phrase s'exécute dans ce mode d'écriture - donc horizontalement en anglais, et verticalement dans n'importe quel mode d'écriture vertical. Nous voulons alors qu'il ait une longueur de 150 pixels dans la dimension du bloc, qui est la façon dont les blocs tels que les paragraphes sont affichés dans ce mode d'écriture particulier. Nous pourrions donc dimensionner notre bloc comme suit:

.box { block-size: 150px; inline-size: 250px; }

La boîte suit maintenant le mode d'écriture utilisé. Il existe des propriétés logiques et des valeurs créées et implémentées dans les valeurs de chaque contrepartie physique: Firefox a actuellement le meilleur support pour celles-ci.

Grille niveau 2 et sous-grille

Les travaux sont déjà en cours au niveau 2 de la spécification CSS Grid Layout. Ce niveau concerne la fonctionnalité de sous-grille. Les sous-grilles signifieront qu'en plus des enfants directs d'un conteneur de grille devenant un élément de grille, vous pourrez créer une grille sur un élément de grille et lui faire utiliser les pistes de colonne et de ligne du parent. Cela signifierait, par exemple, que vous pourriez créer une grille à plusieurs colonnes pour votre page et l'utiliser pour aligner les éléments imbriqués dans le balisage.

.grid { display: grid; grid-template-columns: 1fr 2fr 1fr 2fr; } .item { grid-column: 2 / 5; display: grid; grid-template-columns: subgrid; }

Dans l'exemple CSS ci-dessus, j'ai un élément parent défini sur affichage: grille , qui définit une grille à quatre colonnes. L'élément enfant avec une classe d'élément est placé sur la grille de la ligne de colonne 2 à la ligne de colonne 5, couvrant trois pistes de la grille parent. En utilisant la valeur subgrid à la place d'une liste de pistes pour les colonnes de modèle de grille sur l'élément enfant, nous demandons à sa grille d'utiliser les pistes du parent. Tout enfant d'élément utilisera donc le dimensionnement des pistes de colonne tel que défini sur la grille parent.

Ce n'est encore implémenté dans aucun navigateur, mais je pense que nous devrions bientôt commencer à voir des implémentations.

Lettre initiale

Une lettre initiale de fantaisie peut être insérée dans notre contenu avec la propriété de lettre initiale, qui n

Une lettre initiale de fantaisie peut être insérée dans notre contenu avec la propriété de lettre initiale, qui n'est actuellement disponible que dans Safari

Initial Letter, actuellement uniquement implémentée dans WebKit, est une petite fonctionnalité qui résout un problème courant. Il permet la création d'une grande lettre initiale (ou majuscule) enfoncée dans le texte qui la suit.

Le CSS est une propriété: lettre initiale; pour le voir fonctionner, vous avez besoin de la propriété WebKit préfixée pour Safari et iOS Safari. Les deux valeurs pour lettre initiale sont le nombre de lignes que la lettre doit couvrir en hauteur, puis le nombre de lignes à insérer dans le texte.

h1+p::first-letter { font-weight: bold; -webkit-initial-letter: 4 3; initial-letter: 4 3; }

Polices variables

Jouez avec les capacités des polices variables en utilisant le site Web Axis Praxis et trouvez des polices qui prennent en charge les nouvelles fonctionnalités

Jouez avec les capacités des polices variables en utilisant le site Web Axis Praxis et trouvez des polices qui prennent en charge les nouvelles fonctionnalités

Si vous avez déjà utilisé une police Web dans une conception, vous comprendrez le problème de devoir inclure - et donc votre utilisateur doit télécharger - chaque variante de la police que vous devez utiliser. Pour la plupart des polices, vous souhaiterez les versions standard, gras et italique de la police. Cela représente quatre demandes plus une quantité raisonnable de données à télécharger.

Une police variable est un fichier de police unique qui contient toutes les variantes ci-dessus et bien d'autres. OpenType Font Variations est une technologie développée conjointement par Microsoft, Google, Apple et Adobe et cette fonctionnalité devrait faciliter l'utilisation d'une belle typographie sur le Web.

Pour utiliser des polices variables, vous devez utiliser une police qui prend en charge la fonctionnalité et un navigateur qui a implémenté la propriété font-variation-settings, qui vous permet de contrôler les différents axes de la police choisie. Le support dans les navigateurs modernes est excellent. Pour avoir une idée de la façon dont les polices peuvent être contrôlées, consultez le Site Web de la pratique Axis , où vous pouvez jouer avec différentes polices et copier le CSS utilisé pour la variante de police que vous avez créée.

Pour rechercher et tester des polices variables, visitez v-fonts.com. Le compte Twitter de Variable Fonts vaut la peine d'être suivi pour découvrir de nouvelles versions de polices et d'autres nouvelles.

Faire défiler la capture

Notre exemple de capture de défilement met chaque élément au début lorsque le visiteur fait défiler une boîte avec un débordement: faites défiler verticalement

Notre exemple de capture de défilement met chaque élément au début lorsque le visiteur fait défiler une boîte avec un débordement: faites défiler verticalement

CSS Scroll Snapping signifie que vous pouvez créer des interfaces qui s'alignent sur les points de défilement. Ceci est utile pour les interfaces pleine page que vous souhaitez agir de la même manière qu'une application mobile pourrait, en s'alignant de page en page.

Le code ci-dessous crée une liste d'éléments, où le parent a une hauteur fixe et le débordement est configuré pour défiler. Je veux que les éléments s'alignent en haut du conteneur au fur et à mesure qu'ils défilent.

Sur l'élément parent, nous ajoutons la propriété scroll-snap-type , qui a une valeur de l'axe sur lequel nous faisons défiler puis un mot-clé de obligatoire ou proximité . Le obligatoire Le mot-clé forcera l'accrochage au point d'accrochage, par conséquent, vous devez faire attention, lorsque vous l'utilisez, à ne pas provoquer une situation où l'utilisateur ne peut pas faire défiler jusqu'à une partie du contenu en raison de l'accrochage de défilement.

Sur les éléments, nous spécifions où nous voulons nous accrocher à l'aide de la propriété scroll-snap-align . Dans ce cas, j'ai sélectionné début ; les autres valeurs sont centre et finir .

ul { list-style: none; border: 5px solid rgb(126,63,222); border-radius: .5em; height: 300px; padding: 0; overflow-y: scroll; scroll-snap-type: y mandatory; } li { background-color: rgba(126,63,222,.3); padding: 40px 20px ; border-bottom: 1px solid rgb(126,63,222); min-height: 150px; scroll-snap-align: start; }

Requêtes média niveau 4

La spécification Media Queries Level 4 nous offre de nouvelles façons intéressantes de détecter le périphérique utilisé par un visiteur, ainsi que des améliorations de syntaxe qui aident à rendre Media Queries moins verbeuses.

Détecter le type de pointeur

Les façons dont les gens interagissent avec votre site ou votre application changent. Votre visiteur peut visiter votre site sur un appareil à écran tactile, à l'aide d'un clavier et d'une souris ou - avec des appareils tels que le Microsoft Surface Book agissant comme des ordinateurs portables traditionnels dotés également d'un écran tactile - les deux à la fois. Par conséquent, examiner la taille de l'écran n'est pas un bon moyen de savoir quel type d'appareil possède réellement votre utilisateur. Media Queries Level 4 présente les fonctionnalités de média d'interaction, qui nous permettent de découvrir le type de pointeur d'un utilisateur et de tester des propriétés telles que la possibilité de survoler.

des choses sympas à dessiner sur votre poignet

Par exemple, si je voulais ajouter du CSS pour les utilisateurs d'écran tactile, je pourrais utiliser le code suivant pour tester un pointeur grossier:

@media (pointer:coarse) { /* CSS rules for touch screen */ }

Je pourrais également tester la possibilité de survoler:

@media (hover) { /* CSS rules useful to people with devices that have hover support */ }

Ces requêtes multimédias vous offrent un autre moyen de tester les capacités de l'appareil afin d'offrir une expérience formidable à tous les visiteurs de votre site. Ils sont actuellement pris en charge dans tous les navigateurs modernes autres que Firefox.

Améliorations de la syntaxe pour les requêtes multimédias

La spécification de niveau 4 inclut également des améliorations de syntaxe car les requêtes multimédias sont actuellement très détaillées - en particulier lors de la spécification d'une plage, par exemple:

@media (min-width: 40em) and (max-width: 59em) { /* CSS rules for screen sizes between 40em and 59em */ }

La nouvelle spécification nous permet d'utiliser la syntaxe suivante et d'obtenir la même chose:

@media (40em <= width <= 59em ) { /* CSS rules for screen sizes between 40em and 59em */ }

Cette syntaxe semble étrange au premier abord mais ce que nous disons, c'est que la largeur doit être supérieure ou égale à 40em, et également inférieure ou égale à 59em. Il peut être utile de regarder d'abord la largeur, puis de la comparer aux éléments de chaque côté. L'ancienne syntaxe ne disparaît pas, vous pouvez donc l'utiliser non plus.

Utilisez CSS pour tester la prise en charge du navigateur

Les requêtes de fonctionnalités ont une excellente prise en charge du navigateur, une prise en charge de test et tout ce qui est nouveau dans CSS peut être testé pour leur utilisation

Les requêtes de fonctionnalités ont une excellente prise en charge du navigateur, une prise en charge de test et tout ce qui est nouveau dans CSS peut être testé pour leur utilisation

CSS a même développé un moyen pour vous de tester la prise en charge par le navigateur des nouvelles fonctionnalités CSS, avec des requêtes de fonctionnalités. Une requête de fonctionnalité se comporte à peu près de la même manière qu'une requête multimédia, sauf qu'au lieu de demander au navigateur quelque chose sur l'appareil utilisé pour afficher le site, une requête de fonctionnalité demande au navigateur s'il prend en charge une fonctionnalité CSS particulière. Cela facilite l'utilisation des nouvelles fonctionnalités de manière sûre et progressivement améliorée.

@supports (display: grid) { /* CSS rules for browsers that support grid layout */ }

La prise en charge par le navigateur des requêtes de fonctionnalités est excellente, mais elles ne sont pas prises en charge dans Internet Explorer 11 et les versions antérieures. C'est moins un problème que vous ne le pensez: tant que vous testez le support et que vous écrivez le code pour les navigateurs compatibles, vous pouvez écraser tout ce que vous deviez faire auparavant dans votre CSS pour ces navigateurs plus anciens (si c'est votre appareil qui est plus ancien et pas à la hauteur, vous aurez envie d'explorer votre stockage en ligne options).

Tout ce qui est nouveau dans CSS, vous pouvez utiliser des requêtes de fonctionnalités pour tester. Je pense qu'ils sont l'une des meilleures choses à entrer récemment dans CSS car ils nous permettent de commencer à utiliser de nouvelles fonctionnalités plus rapidement et, comme vous l'avez vu dans cet article, il y a beaucoup de choses pour commencer!

Cet article a été initialement publié dans le numéro 312 du magazine Net. Achetez-le ici .

Lire la suite: