7 nouvelles techniques CSS étonnantes pour 2019

Publié: 2019-05-01

C'est le bon moment pour choisir le développement Web comme option de carrière. Tout comme les concepteurs Web, les développeurs Web sont également fascinés par les moyens d'essayer de nouvelles techniques CSS et de repousser les limites de ce que CSS peut faire.

Ici, nous examinerons certaines des nouvelles techniques CSS et des spécifications complètes qui font leur chemin dans les conceptions créatives. Vous pouvez contrôler presque tous les aspects d'un design grâce à un CSS bien décrit. En outre, cela peut améliorer une meilleure expérience utilisateur globale, avec un code plus propre et plus cohérent.

1. Lettre initiale

La lettre initiale est une propriété CSS, propriété qui sélectionne la première lettre de l'élément et précise le nombre de lignes occupées par la lettre. Le plus souvent, il est utilisé dans la presse écrite et les sites d'information, les sites d'actualités, où la première lettre du paragraphe est beaucoup plus élevée que le reste du contenu.

La propriété initial-letter ajuste automatiquement le nombre de lignes nécessaires pour créer la lettrine stylisée et la taille de la police. Initial-letter approuve les valeurs suivantes :

  • <nombre> fait référence au nombre de lignes occupées par la lettre dans lesquelles les valeurs négatives ne sont pas acceptées ;
  • normal est utile si vous souhaitez réinitialiser la valeur si elle peut être héritée de la cascade et qu'aucun effet de mise à l'échelle n'est appliqué à la première lettre ;
  • <integer> détermine le nombre de lignes dans lesquelles la lettre doit s'enfoncer lorsque sa taille est prédéfinie. Les valeurs doivent être supérieures à zéro, et si la valeur n'est pas spécifiée, la valeur de taille est dupliquée, ramenée au nombre entier positif le plus proche ;

Le ::first-letter pseudo-element peut être utilisé pour sélectionner des caractères qui seront formatés comme des lettres initiales. Le ::first-letter pseudo-element ne sélectionne pas la première lettre de l'élément qui a display: inline, mais ne fonctionne que sur les éléments qui ont une valeur display de block, table-cell, table-caption ou list-item .

<!DOCTYPE html>
<html>
<head>
<style>
p {
 font-family: Serif;
 font-size: 20px;
 margin-bottom: -15px;
}
h1 {
 font-family: Sans-serif;
 font-size: 3.1em;
 color: black;
}
body {
 padding: 10px;
}
div {
 width: 550px;
 line-height: 25px;
}
p:first-of-type:first-letter {
 background-color: black;
 color: white;
 float: left;
 font-size: 50px;
 margin-right: 10px;
 margin-top: 7px;
 padding: 18px;
 box-shadow: 0 0 10px -2px black;
}
</style>
</head>
<body>
<h1>About initial letter</h1>
<div>
<p>Only one who devotes himself to a cause with his whole strength and soul can be a true master. For this reason mastery demands all of a person"</p>
<p>"Concern for man and his fate must always form the chief interest of all technical endeavors. Never forget this in the midst of your diagrams and equation"</p>
</div>
</body>
</html>

Initial letter

2. Polices variables

Les polices variables représentent un nouvel ensemble de fonctionnalités définies dans le cadre de la spécification OpenType et permettent aux fichiers de police de contenir plusieurs variantes d'une police dans un seul fichier, appelé police variable. En pratique, il permet d'accéder aux variables contenues dans le fichier de police avec une seule référence @ font-face. De plus, les polices variables permettent des fonctions telles que la transition des styles de police, les styles de police personnalisés et l'animation. L'avantage d'utiliser la police variable est que vous avez accès à la gamme complète de styles, de poids et de largeurs disponibles.

Les polices variables définissent leurs variations par des axes de variation et il existe 5 axes standards :

  • ital : l'axe italique fonctionne différemment car il est activé ou désactivé, il n'y a pas d'entre-deux. La valeur peut être définie à l'aide de la propriété CSS font-style. Aussi, en introduisant font-synthesis: none, empêchera les navigateurs d'appliquer accidentellement l'axe de variation et un italique synthétisé.
  • wght : contrôle le poids de la police et la valeur peut être définie à l'aide de la propriété CSS font-weight .
  • wdth : contrôle la largeur de la police et la valeur peut être définie à l'aide de la propriété CSS font-width. domaine encodé, le navigateur crée la police à la valeur autorisée la plus proche.
  • opsz : le dimensionnement optique fait référence à la pratique consistant à modifier la taille optique de la police et la valeur peut être définie à l'aide de CSS font-optical-sizing. Les valeurs de taille optique sont automatiquement appliquées en fonction de la taille de la police, mais peuvent être manipulées à l'aide de la variation de police -settings. Lors de l'utilisation de font-optical-sizing, les valeurs admises sont auto ou none, et lors de l'utilisation de font-variation-settings, une valeur numérique est fournie.
  • slnt : contrôle l'inclinaison de la police et la valeur peut être définie à l'aide de la propriété CSS font-style. Elle est variable en étant exprimée sous la forme d'une plage numérique, ce qui permet de faire varier la police n'importe où le long de cet axe.

Utiliser des polices variables avec @font-face – lors de l'utilisation de polices variables sur le web, cela implique de définir des règles @ font-face qui indiquent des fichiers de polices variables. Voici 2 liens qui permettent de trouver des polices variables : axis-praxis.org et v -fonts.com.

<!DOCTYPE html>
<html>
<head>
<title>About variable fonts</title>
</head>
<style>
@font-face {
  font-family: 'Avenir Next Variable';
src: url('https://cdn.rawgit.com/Monotype/Monotype_prototype_variable_fonts/f8067a0e/AvenirNext/AvenirNext_Variable.ttf') format('truetype');
}
html {
  font-family: 'Avenir Next Variable', sans-serif;
}
p {
  font-variation-settings: 'wght' 630, 'wdth' 88;
}
</style>
<body>
<h1>About variable fonts</h1>
<h2>About variable fonts</h2>
<p>
	"Any intelligent fool can make things bigger and more complex… It takes a touch of genius – and a lot of courage to move in the opposite direction."
</p>
</body>
</html>

Variablefonts

3. Propriétés et valeurs logiques

Logical Properties and Values ​​est un module CSS qui introduit des propriétés et des valeurs logiques qui permettent de contrôler l'apparence par le biais de directions logiques et de mappages de dimensions. Les propriétés et valeurs logiques utilisent des termes tels que block et inline pour décrire la direction dans laquelle La spécification des propriétés logiques et des valeurs caractérise les mappages de valeurs physiques dans leurs relations logiques.

La dimension en ligne - est la dimension le long de laquelle une ligne de texte est écrite dans le type d'écriture utilisé. Ainsi, dans un document anglais aléatoire, le texte est horizontal, de gauche à droite, dans un autre document arabe, l'écriture est également horizontale mais de droite à gauche et si l'on prend en compte un document japonais, la dimension en ligne est maintenant verticale car le le mode d'écriture s'exécute verticalement.

La dimension du bloc – correspond à l'ordre dans lequel les blocs sont affichés sur la page. En anglais et en arabe, ils sont exécutés verticalement, tandis que dans n'importe quel mode d'écriture vertical, ils sont exécutés horizontalement.

<!DOCTYPE html>
<html>
<head>
<style>
html {
  font: 20px Sans-serif;
}
body {
  padding: 25px;
  background-color: lightyellow;
  color: black;
}
.box {
  border: 4px solid black;
  border-radius: 20px;
  padding: 20px;
  margin: 12px;
}
.one {
  block-size: 100px;
  inline-size: 200px;
}
.two {
  height: 100px;
  width: 200px;
}
</style>
</head>
<body>
</div>
<div id="container">
<div class="box one">
  My block-size is 100 pixels, my inline-size 200px.
</div>
<div class="box two">
  My height is 100 pixels, my width 200px.
</div>
</div>
</body>
</html>

Logical properties and values

4. Faites défiler l'accrochage

La propriété CSS scroll-snap-type détermine la rigidité avec laquelle les points d'attache sont appliqués au conteneur de défilement. En d'autres termes, elle verrouille la fenêtre d'affichage sur certains éléments ou emplacements une fois que l'utilisateur a terminé le défilement. C'est un excellent moyen d'afficher des galeries d'images. .Auparavant, il pouvait être utilisé avec JavaScript, mais grâce au nouveau module CSS Scroll Snap, l'effet peut être contrôlé dans CSS.Scroll snapping se fait en définissant l'élément parent / conteneur et les enfants dans le conteneur qui s'aligneront en fonction du règles définies dans le conteneur. La propriété Scroll-snap-type est la propriété la plus importante qui s'applique à l'élément conteneur. Définit l'axe d'accrochage au défilement x, y, bloc, en ligne ou les deux et la rigueur de l'accrochage au défilement aucun, proximité ou obligatoire.

<!DOCTYPE html>
<html>
<head>
<style>
html, body, .C {
  height: 50%;
}
.C {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: arial;
}
.container {
  display: flex;
  flex: none;
  overflow: auto
}
.container.x {
  width: 70%;
  height: 150px;
  flex-flow: row nowrap;
}
.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}
.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}
.x.container> div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}
.y.container> div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 256px;
}
.y.container>div:{
  line-height: 1.4;
  font-size: 80px;
}
.container >div:{
  background-color: white;
}
.container >div:{
  background-color: white;
}
</style>
</head>
<body>
<div class=".C">
<div class="container x mandatory-scroll-snapping" dir="ltr">
<div>Scroll Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>About Scropp Snapping</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</div>
</body>
</html>

Scroll snapping

5. Niveau de grille 2 et sous-réseau

La spécification de niveau 2 contient tout le niveau 1 et quelques nouvelles fonctionnalités. Le niveau 2 de la spécification de grille crée la fonctionnalité de sous-grille de CSS Grid. Option de mise en page de grille, un élément de grille peut être transformé en conteneur de grille en définissant display: grid dessus. Dans l'exemple ci-dessous, j'ai un élément qui comprend 3 pistes de colonne de la grille, est une grille de conteneur avec 3 pistes de colonne, et ceux-ci ne s'alignent pas avec les pistes du parent.

<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Level 2 - subgrid</title>
</head>
<style>
body {
  margin: 20px;
}
.one {
  background-color: black;
  color: white;
  border-radius: 20px;
  padding: 20px;
  font-size: 120%;
}
.A .one {
  background-color: lightgrey;
}
.GRID {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 3fr 1.5fr 2fr 1fr 1fr 2fr;
  background-color: white;
  color: black;
  margin: 1.5em 0;
}
.A {
  padding: 0;
  grid-gap: 15px;
  grid-column: auto / span 4;
  display: grid;
  grid-template-columns: 3fr 1.5fr 1.5fr;
}
</style>
<body>
<div class="GRID">
<div class="one 1">1</div>
<div class="one 2">2</div>
<div class="one 3">3</div>
<div class="one 4">4</div>
<div class="one 5">5</div>
<div class="one 6">6</div>
<div class="one 7">7</div>
<div class="one 8">8</div>
<div class="one A">
<div class="one 9">9</div>
<div class="one 10">10</div>
<div class="one 11">11</div>
<div class="one 12">12</div>
<div class="one 13">13</div>
<div class="one 14">14</div>
</div>
<div class="one 15">15</div>
<div class="one 16">16</div>
<div class="one 17">17</div>
<div class="one 18">18</div>
<div class="one 19">19</div>
<div class="one 20">20</div>
</div>
</body>
</html>

Grid level 2 and subgrid

Étant un projet open source, vous pouvez voir sur GitHub comment le travail évolue dans le groupe CSS. Le développement des spécifications et de la mise en œuvre du navigateur est un processus circulaire. Ainsi, vous pouvez voir comment cette fonctionnalité de sous-réseau progresse et les implémentations de navigateur émergentes.

6. Utilisez CSS pour tester la prise en charge du navigateur

CSS a développé un moyen de tester la prise en charge des navigateurs pour les nouvelles fonctionnalités. En gros, posez une question pour savoir si le navigateur accepte une fonctionnalité CSS spécifique. De cette façon, les nouvelles fonctionnalités sont utilisées de manière sûre et concise. Lorsque vous utilisez une nouvelle fonctionnalité CSS, vous devez vérifier si le navigateur prend en charge cette fonctionnalité. Sur cette ligne, il est recommandé de consulter les données sur caniuse.com, où vous pouvez importer les données de votre emplacement.

Use CSS to test browser support

Le @supports CSS vous permet de spécifier des déclarations qui dépendent de la prise en charge par le navigateur des fonctionnalités CSS, cela s'appelle une requête de fonctionnalité. Cette règle peut être écrite en haut du code ou elle peut être imbriquée dans n'importe quel autre groupe conditionnel à la règle.

@supports (display: grid) {
  div {
    display: grid;
  }
}
7. Améliorations de la syntaxe pour les requêtes multimédias - Niveau 4

La spécification Media Queries Level 4 contient certaines améliorations de la syntaxe pour effectuer des requêtes multimédias à l'aide de fonctionnalités qui ont un type de plage tel que la hauteur et la largeur.

Pour illustrer, nous utilisons la fonctionnalité max pour la largeur

@media (max-width: 20em)

Nous pouvons essayer une largeur entre deux valeurs aléatoires en utilisant min- et max-

@media (min-width: 20em) and (max-width: 35em)

Pour une meilleure compréhension, dans l'exemple ci-dessus, nous voulons dire que la largeur est supérieure ou égale à 20em et inférieure ou égale à 35em

Conclusion

Les développeurs de sites Web doivent être au courant de toutes les nouvelles techniques CSS et les appliquer dans de futurs projets. Ils élèveront leurs normes de travail et les clients seront satisfaits de l'apparence améliorée du site Web.