Fermer

novembre 20, 2020

9 nouvelles fonctionnalités du navigateur 2020 que vous ne saviez probablement pas


Alors que 2020 tire à sa fin, passons en revue neuf des meilleures fonctionnalités de navigateur que vous devez utiliser!

Le Web est en constante évolution. En tant que développeurs Web, nous le savons et, avouons-le, c'est l'une des raisons pour lesquelles nous aimons notre travail! 💁🏻‍♀‍

Donc, aujourd'hui, je vais partager avec vous les neuf principales nouveautés qui ont attiré mon attention cette année.

1. IntersectionObserver V2

L'API Intersection Observer vous permet de détecter lorsqu'un élément apparaît dans la fenêtre. L'API d'origine est supportée maintenant par tous les principaux navigateurs.

Avec l'API d'origine, les personnes «mal intentionnées» pourraient profiter de ses lacunes. Principalement à cause de son incapacité à détecter lorsqu'un élément est occulté (couvert) par un contenu.

Pour comprendre de quoi je parle, vous devriez voir cette démo d'un lecteur vidéo qui déclenche une publicité (

C'est pourquoi le nouvel Intersection Observer a été implémenté (même si tous les navigateurs ne le supportent pas encore comme vous pouvez le voir ) ici ). Le principal à retenir est que l'IO V2 fonctionne en suivant la visibilité d'un élément au lieu de simplement sa présence dans la fenêtre.

Maintenant, je ne peux pas vous laisser avec ça. J'ai préparé un petit exemple qui vous aidera à vérifier la différence d'implémentation de V1 (la partie commentée) à V2:

 < div    class  =  " viewport  ] " > 
	 < div    class  = "  element  " >  before scroll [19659021] </  div > 
	 < div    class  =  " observe "  >  après le défilement  </  div > 
 </  div > 
 
    .viewport   {
	 hauteur :   200  px ; 
	 background-color  :  bleu ; 
	 overflow-y :  scroll ; 
	 padding :   16  px ; 
 } 

 .element   {
	 hauteur :   300  px ; 
	 background-color :  red  ; 
} 

 .observed   {
	 height :   100  px ; 
	 background-color :  green ; 
} 















 const    handler    =   ( entries )   =>   {
	 for   (  const  entrée  de  entrées )   {
		 if   ( entry .  isIntersecting  &&  ent ry .  isVisible )   {
console .  log  ( `Visible depuis  $ { entrée .  time }  `  ) ; 
		}   else   {
console .  log  ( `v2 not supported, fallback to v1`  ) ; 
			 if   ( entry  ].  intersectionRatio >    0 )   {
console .  log  ( "élément observé dans la vue" ) ; 
console .  log  ( entry ) ; 
			}   else   {
console .  log  ( "élément observé hors de vue" ) ; 
			} 
		} 
	} 
}  ; 

 const  observer  =    new    IntersectionObserver  ( handler   {
seuil :   [ 1.0 ] 
trackVisibility :   true 
retard :   100 
} ) ; 

observateur .  observe  ( document .  querySelector  ( ". observe" ) ) ; [19659140] Vous pouvez visualiser les journaux de la console dans ce  JSFiddle . 👈🏼 




 Pour plus de détails sur l'utilisation d'Intersection Observer V2, consultez cet  article sur la mise à jour des fonctionnalités de Google . 




 2. API Screen Wake Lock 


 Utilisez-vous votre téléphone pour suivre des recettes et vous ennuyez-vous à chaque fois que vous devez vous laver et vous sécher les mains pour déverrouiller votre écran parce que votre écran est resté inactif? 😒 


 Eh bien, ne vous inquiétez plus! Les dieux de l'internet nous ont souri cet été. 🤗 L'API Screen Wake Lock est ici (enfin,  principalement pour les utilisateurs de Chrome  😁). 


 L'API Screen Wake Lock fournit aux développeurs un moyen d'empêcher l'écran de s'éteindre, de s'assombrir ou de se verrouiller. Jusqu'à présent, vous ne pouviez y parvenir que dans une application native ou via des solutions de contournement hacky et gourmandes en énergie (comme  NoSleep.js  qui lit une vidéo cachée sur la page Web, mais maintenant au moins, il a ajouté la prise en charge de l'écran Wake Lock API). 


 Voici comment utiliser la nouvelle API Screen Wake Lock: 


 let  wakeLockSentinel  =    null ; 

 const  requestWakeLock  =    asynchrone   ()   =>   {
	 if   ( "wakeLock"    in  navigateur )   {
		 essayez   {

console .  log  ( "L'API Screen Wake Lock est prise en charge" ) ; 


wakeLockSentinel  =    attendre  navigateur .  wakeLock .  request  ( "screen" ) ; 
console .  log  ( "Screen Wake Lock API is active" ) ; 


wakeLockSentinel .  addEventListener  ( "release"   ()   =>   {
console .  log  ( "Screen Wake Lock has been release" ) ; 
			} ) ; 
		} [19659083] catch   ( err )   {
console .  error  ( err ) ; 
		} 
	}   else   {
console .  log  ( "L'API Screen Wake Lock n'est pas prise en charge" ) ; 
	} 
} ; 

 requestWakeLock [19659013] () ; 


 setTimeout  ( ()   =>   {
wakeLockSentinel .  version  () .  puis  ( ()   =>   {
wakeLockSentinel  =    null ; 
console .  log  ( "Screen Wake Lock API is disabled" ) ; 
	} ) ; 
} [19659013]  600000 ) ; 

 Un excellent exemple a été fourni 👉🏼  ici  par MDN Web Docs. Comme  ils l'expliquent leur «démo utilise un bouton pour acquérir un verrou de réveil et aussi le libérer, ce qui à son tour met à jour l'interface utilisateur. L'interface utilisateur se met également à jour si le verrou de réveil est automatiquement libéré pour une raison quelconque. Il y a une case à cocher qui, lorsqu'elle est cochée, réacquiert automatiquement le verrou de réveil si l'état de visibilité du document change et redevient visible. »
 Cette fonctionnalité est pratique et est disponible dans  presque tous les navigateurs  sauf Internet Explorer (😒 bien sûr).
 Ce que fait le sélecteur CSS: any-link, c'est du style chaque élément 
 dans lequel  href  est défini.
 😃 Ainsi, par exemple, nous finirons ici avec juste le premier lien qui a le style défini appliqué à il:
 < a    href  =  " http://nadarifki.com/ "  >  mon portfolio [19659021] </  a >   < a >  not my portfolio  </  a > 
 
   a : any-link   {
 background-color :  purple ; 
	 color :  blanc ; 
} 

 4. Visibilité du contenu CSS
 Si vous avez déjà travaillé sur des sites Web à fort contenu avec un large public, vous comprenez à quel point les performances de chargement des pages sont vitales. C'est un champ de bataille important dans le développement Web. C'est la raison pour laquelle cette nouvelle propriété de visibilité du contenu CSS a été lancée dans  Chromium 85 .
 En un mot, la visibilité du contenu est une propriété CSS qui contrôle si et quand le contenu d'un élément est rendu. 🤔 Quel est son impact sur les performances de chargement des pages? En rendant uniquement le contenu d'un composant hors écran lorsqu'il devient à l'écran. De cette façon, le rendu de votre contenu hors écran / sous le contenu du pli n'a pas d'impact sur le chargement de votre contenu à l'écran.
 La propriété CSS content-visibilité prend trois valeurs:
  • content-visibilité : visible : Ceci n'a aucun impact sur le rendu de l'élément auquel il est appliqué.
  • content-visibilité: hidden : Ceci est similaire à l'affichage : aucun mais différent de manière significative ☝🏼. Un affichage : aucun ne cache pas seulement un élément. Il détruit également son état de rendu (qui est aussi coûteux que le rendu de l'élément en termes de performances), tandis que content-visibilité: hidden le cache mais conserve son état de rendu.
  • content-visibilité: auto ]: C'est le plus intéressant car c'est celui qui permet au navigateur d'activer et de désactiver la visibilité de l'élément en fonction de sa présence à l'écran ou hors écran. Ce qui peut entraîner «une augmentation des performances de rendu de 7x lors du chargement initial» selon Chrome Developers comme indiqué dans leur démo, avec une très grande différence de temps de rendu:

    Démonstration des développeurs Chrome sans contenu-visibilité appliquée "title =" Démo développeurs Chrome sans visibilité du contenu appliquée "/> </p> <p><img decoding= 5. CSS :: marker Pseudo-élément

    Souvenez-vous de l'époque où vous venez de commencer à jouer avec HTML et CSS, en essayant de styliser les éléments

  • et vous vous dites: "Comment diable n'y a-t-il pas un moyen de styliser quelque chose comme communs et basiques comme éléments de liste? » 😏

    🙄 Nous sommes tous passés par là, et enfin, les générations futures n'auront pas à s'interroger à ce sujet ni à écrire du code CSS hacky pour styliser les éléments de la liste! 🤷🏻‍♀‍

    Comment? Pseudo-élément CSS :: marker :

       < ul > 
 < li >  Yan  </  li > 
	 < li >  Ithnan  </  li > 
	 < li >  San  </  li > 
	 < li > [19659020] Quatre  </  li > 
	 < li >  Cinq  </  li > 
	 < li >  Roku  </  li > 
	 < li >  Ilgob  </  li [19659013]> 
	 < li >  Ocho  </  li > 
 </  ul > 
 
       ul li  {
	 couleur :  gris ; 
} 

 ul li  :: marker  [19659013] {
	 couleur :  magenta ; 
	 contenu :   ">" ; 
	 font-size :   14  px ; 
}

    Il est maintenant pris en charge par presque tous les principaux navigateurs, sauf IE et Opera. ☝🏻 Donc, si vous utilisez Chrome, assurez-vous que votre navigateur est à jour pour voir la différence de style!

    6. Fragment de défilement d'URL vers le texte

    Il y a quelques petits changements progressifs sur le Web qui sont tout simplement géniaux! 😻

    Vous savez déjà que vous pouvez accéder directement à une section sur une page avec le nom id de l'élément HTML précédé de # (comme ici ). 😎 Vous pouvez désormais accéder à n'importe quelle partie d'une page Web via la fonction Fragment de défilement d'URL vers le texte (qui met également en évidence la section sélectionnée de la page que vous référencez dans votre URL).

    Ceci sonne tout comme du charabia sauf si je vous montre. C'est pourquoi j'ai préparé cette petite démo:

    Fragment de défilement d'URL vers le texte "title =" Fragment de défilement d'URL vers le texte "/> </p> <p> Donc, comme vous pouvez le voir, je n'avais qu'à ajoutez le fragment <code> #: ~: text = [prefix][suffix]</code> à la fin de mon URL, et terminez avec cette URL: <code> https://www.telerik.com/blogs/author/ nada-rifki #: ~: text = 7, Life </code> qui s'ouvre juste à l'élément en surbrillance. </p> <p> Tellement cool! ⚠️ Notez que <code>[prefix]</code> et <code> [suffix]</code> indiquent comment votre texte commence et se termine . </p> <blockquote> <p> 👉🏼 Ici, consultez le support du navigateur <a href= .

    7. Propriété Gap pour Flexbox

    Si vous avez précédemment utilisé la propriété grid-gap dans CSS Grid vous vous êtes probablement demandé pourquoi ce n'était pas une chose dans Flexbox. 🤷🏻‍♀‍ Eh bien maintenant c'est le cas ( sauf pour IE et Safari )!

    Vous pouvez utiliser le gap dans Flexbox de la même manière que vous utilisez grid-gap dans Grid. La seule différence est sa syntaxe raccourcie (t hat Grid est également adopté maintenant).

    Par exemple 👇🏼:

    
 gap :   20  px ; 


 gap :   20  px  10  px ; 


 column-gap :   10  px ; 


 column-gap :   20  px :

    😜 Vous pouvez en savoir plus sur cette propriété ici sur MDN Web Docs .

    8. Valeur CSS Revert

    Le mot-clé CSS revert remet le style d'un élément à sa valeur comme si aucune modification n'avait été apportée à cet élément. Pour ce faire, revert suit la valeur en cascade de la propriété:

    • d'abord, en vérifiant la feuille de style utilisateur;
    • ensuite, le style par défaut du navigateur;
    • enfin, si les deux sont manquants, unset est appliqué (en appliquant inherit ou initial ).

    ☝🏼 Attention, la valeur revert est différente de la CSS initial parce que initial changera TOUJOURS la valeur de style par la valeur par défaut définie dans la spécification CSS officielle.

    Je trouve la valeur CSS revert utile lorsque, par exemple, je stylise un élément pour mobile, puis je dois rétablir une valeur de style spécifique à son origine sur le bureau (rappel rapide et aimable 😊 toujours mobile-first! ).

    Vous pouvez trouvez d'excellents exemples qui vous aideront à mieux comprendre revert sur le MDN Web Docs et ici 👉🏼 vous pouvez vérifier out browser support .

    9. Format d'image AVIF

    AVIF est un nouveau format d'image, et voici ce que vous devez savoir: il est 50% plus petit qu'une image JPEG classique, avec une qualité supérieure à une image JPEG de même poids. Donc, moins de poids + moins de pixellisation! 🎉

    Cet article est uniquement destiné à présenter les fonctionnalités et à vous donner un aperçu de leur utilisation potentielle. De plus, je laisserais plutôt cet article du Netflix TechBlog vous montrer, en détails et avec des cas d'utilisation réels, la différence entre un JPEG compressé typique et AVIF!

    Le support pour AVIF est disponible pour Chrome et Opera, tandis que pour les navigateurs Firefox, la mise en œuvre est en cours. 😜 Gardez donc un œil sur l'évolution de ce nouveau format d'image prise en charge du navigateur .

    En attendant, vous pouvez commencer à utiliser ce nouveau format en fournissant simplement une image alternative si la prise en charge d'AVIF n'est pas disponible:

       < image > 
	 < source    srcset  =  " image.avif "     type  =  " image / avif "   /> 
	 < img    src  =  " image.jpg "     alt  =  " Alt text "   /> 
 </  image >

    J'espère que vous les avez trouvés utiles, et s'il y a d'autres nouvelles fonctionnalités que vous connaissez, faites-le nous savoir dans les commentaires, ou vous pouvez également me contacter sur Twitter @RifkiNada ou voir mon travail sur NadaRifki.com . 😜



Le meilleur outil 2023 pour ta croissance Instagram !



Source link