Table des matières
Chris Coyier: Le Web moderne est en fait assez bon
tolu adegbite: maîtrise Aria pour l'accessibilité Web
Miriam Suzanne: Spécificité CSS à apprivoisement avec les couches en cascade
Dave Rupert: conquérir votre arriéré d'accessibilité
Maison interface Web tutoriel CSS Certaines choses que j'ai enlevées d'un événement à part en 2022 à Denver

Certaines choses que j'ai enlevées d'un événement à part en 2022 à Denver

Mar 10, 2025 am 09:52 AM

Some Things I Took Away From An Event Apart 2022 in Denver

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 Coyier: Le Web moderne est en fait assez bon

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>
Copier après la connexion

Envisagez d'utiliser l'unité Container Query Query en ligne (CQI):

<code>font-size: clamp(1rem, 1rem + 1cqi, 2rem);</code>
Copier après la connexion

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.

tolu adegbite: maîtrise Aria pour l'accessibilité Web

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>
Copier après la connexion

Correct:

<svg aria-label="An illustrated brown and white tabby kitten looking lovingly into the camera." role="image" viewbox="0 0 100 100"></svg>
Copier après la connexion

Miriam Suzanne: Spécificité CSS à apprivoisement avec les couches en cascade

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: conquérir votre arriéré d'accessibilité

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Article chaud

<🎜>: Dead Rails - Comment apprivoiser les loups
4 Il y a quelques semaines By DDD
<🎜>: Grow A Garden - Guide de mutation complet
2 Il y a quelques semaines By DDD
Niveaux de force pour chaque ennemi et monstre de R.E.P.O.
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Tutoriel Java
1657
14
Tutoriel PHP
1257
29
Tutoriel C#
1230
24
Fontes variables de polices Google Fontes variables de polices Google Apr 09, 2025 am 10:42 AM

Je vois que Google Fonts a déployé un nouveau design (tweet). Comparé à la dernière grande refonte, cela semble beaucoup plus itératif. Je peux à peine faire la différence

Comment créer un compte à rebours animé avec HTML, CSS et JavaScript Comment créer un compte à rebours animé avec HTML, CSS et JavaScript Apr 11, 2025 am 11:29 AM

Avez-vous déjà eu besoin d'un compte à rebours sur un projet? Pour quelque chose comme ça, il pourrait être naturel d'atteindre un plugin, mais c'est en fait beaucoup plus

Guide des attributs de données HTML Guide des attributs de données HTML Apr 11, 2025 am 11:50 AM

Tout ce que vous avez toujours voulu savoir sur les attributs de données dans HTML, CSS et JavaScript.

Comment sélectionner un élément enfant avec l'élément de nom de première classe via CSS? Comment sélectionner un élément enfant avec l'élément de nom de première classe via CSS? Apr 05, 2025 pm 11:24 PM

Lorsque le nombre d'éléments n'est pas fixé, comment sélectionner le premier élément enfant du nom de classe spécifié via CSS. Lors du traitement de la structure HTML, vous rencontrez souvent différents éléments ...

Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»? Pourquoi les zones réduites pourpre dans la disposition Flex sont-elles considérées à tort «espace de débordement»? Apr 05, 2025 pm 05:51 PM

Questions sur les zones de slash violet dans les dispositions flexibles Lorsque vous utilisez des dispositions flexibles, vous pouvez rencontrer des phénomènes déroutants, comme dans les outils du développeur (D ...

Comment nous avons créé un site statique qui génère des modèles tartan dans SVG Comment nous avons créé un site statique qui génère des modèles tartan dans SVG Apr 09, 2025 am 11:29 AM

Le tartan est un chiffon à motifs qui est généralement associé à l'Écosse, en particulier leurs kilts à la mode. Sur tartanify.com, nous avons rassemblé plus de 5 000 tartan

Une preuve de concept pour rendre Sass plus rapidement Une preuve de concept pour rendre Sass plus rapidement Apr 16, 2025 am 10:38 AM

Au début d'un nouveau projet, la compilation SASS se produit en un clin d'œil. Cela se sent bien, surtout quand il est associé à BrowSersync, qui recharge

Pourquoi les feuilles de style personnalisées peuvent-elles prendre effet sur les pages Web locales de Safari mais pas sur les pages Baidu? Pourquoi les feuilles de style personnalisées peuvent-elles prendre effet sur les pages Web locales de Safari mais pas sur les pages Baidu? Apr 05, 2025 pm 05:15 PM

Discussion sur l'utilisation de styles de style personnalisés dans Safari aujourd'hui, nous allons discuter d'une question sur l'application de feuilles de style personnalisées pour le navigateur Safari. Novice frontal ...

See all articles