Un événement à part en 2022 à Denver s'est terminé hier, et malgré le manque de quelques jours, j'ai assisté aux séances de la dernière journée - une expérience vraiment enrichissante! C'était ma première conférence depuis des années, et l'interaction en personne a été incroyablement rafraîchissante.
Mes notes de l'événement suivent, organisées par Speaker. Veuillez noter: mes notes manuscrites sont moins structurées que la plupart, en se concentrant sur les faits saillants plutôt que sur des résumés complets.
Chris's Talk, une version élargie d'une présentation précédente, plongée dans Unités relatives de conteneur . La combinaison avec clamp()
offre une réactivité plus précise, car les valeurs sont relatives au conteneur, pas à la fenêtre. Cela offre une amélioration par rapport à l'utilisation des unités de largeur de la fenêtre (VH) pour la typographie fluide.
par exemple, au lieu de:
<code>font-size: clamp(1rem, 1rem + 2vw, 2rem);</code>
Envisagez d'utiliser l'unité Container Query Query en ligne (CQI):
<code>font-size: clamp(1rem, 1rem + 1cqi, 2rem);</code>
où 1cqi
équivaut à 1% de la taille en ligne du conteneur. (Voir le projet de spécification pour plus de détails).
Chris a également mis en évidence les avantages de performance de Edge Computing . Même après avoir lu ses articles précédents sur le sujet, j'ai acquis une compréhension plus profonde du concept. Les CDN distribués à l'échelle mondiale desservent efficacement les actifs en raison de leur proximité géographique avec les utilisateurs. Cela s'étend au-delà des images aux fichiers statiques HTML, CSS et JavaScript - le cœur de l'approche Jamstack. Cependant, même la récupération dynamique des données peut être intégrée, prédéfinie, servie statiquement à la demande et livrée à une vitesse incroyable à partir du bord.
La présentation de Tolu Adegbite était exceptionnelle! Sa couverture complète de Wai-Aria - rôles, États, étiquetage, descriptions - était inestimable. Une principale à retenir a été d'améliorer l'accessibilité du SVG en ligne. Parce que SVG est un balisage, il n'est pas toujours reconnu comme une image. Pour vous assurer que la technologie d'assistance l'interprète correctement, utilisez les rôles et étiquettes appropriés:
incorrect:
<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Some Things I Took Away From An Event Apart 2022 in Denver "><svg viewbox="0 0 100 100"></svg>
Correct:
<svg aria-label="An illustrated brown and white tabby kitten looking lovingly into the camera." role="image" viewbox="0 0 100 100"></svg>
La conversation de Miriam Suzanne s'est concentrée sur la spécification des couches Cascade (et son guide CSS-Tricks qui l'accompagne). Le changement de clé consiste à gérer la spécificité. Bien que le concept - dispenser @layer
, de commander des couches et d'écrire des styles en eux - est simple, il faut s'adapter à la façon dont les couches peuvent modifier la priorité du sélecteur. Un sélecteur de classe simple peut désormais remplacer un sélecteur d'ID, en fonction de l'ordre de la couche.
Les couches de cascade, aux côtés de sélecteurs comme :is()
, :where()
et :has()
, offrent un contrôle de spécificité puissant. Miriam a également souligné comment les couches en cascade abordent la surutilisation de !important
, permettant la hiérarchisation des couches et la protection de l'héritage.
Dave Rupert a partagé son expérience en s'attaquant à un backlog d'audit d'accessibilité massif. En organisant les problèmes en notion, il a identifié des problèmes récurrents sur plusieurs pages, réduisant considérablement la charge de travail. Son approche a mis l'accent sur la priorisation des problèmes individuels et la compréhension du contexte, plutôt que de se fier uniquement aux outils automatisés. Cette réorganisation a également amélioré sa compréhension de l'impact sur les utilisateurs ayant des déficiences différentes, favorisant l'empathie et meilleure hiérarchisation.
J'ai malheureusement manqué une partie de la dernière session de Hui Jing Chen en raison d'une conversation de couloir, mais je prévois de regarder l'enregistrement lorsqu'il est disponible.
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!