suchen
HeimWeb-FrontendCSS-TutorialEinige Dinge, die ich von einem Ereignis 2022 in Denver abgebaut habe

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

Ein Ereignis von 2022 in Denver endete gestern, und obwohl ich einige Tage fehlte, nahm ich an den Sitzungen des letzten Tages teil - eine wirklich lohnende Erfahrung! Es war meine erste Konferenz seit Jahren und die persönliche Interaktion war unglaublich erfrischend.

Meine Notizen aus der Veranstaltung folgen, organisiert von Sprecher. Bitte beachten Sie: Meine handgeschriebenen Notizen sind weniger strukturiert als die meisten anderen und konzentrieren sich eher auf Highlights als auf umfassende Zusammenfassungen.

Chris Coyier: Das moderne Web ist eigentlich ziemlich gut

Chris 'Vortrag, eine erweiterte Version einer früheren Präsentation, die in Container Relative Units eingewiesen wurde. Die Kombination mit clamp() bietet eine genauere Reaktionsfähigkeit, da die Werte relativ zum Container und nicht zum Ansichtsfenster sind. Dies bietet eine Verbesserung gegenüber der VH -Einheiten (Ansichtsfensterbreite) für die Fluid -Typografie.

Zum Beispiel statt:

<code>font-size: clamp(1rem, 1rem + 2vw, 2rem);</code>

Überlegen Sie die Inline-Größe Containerabfrage (CQI) Einheit:

<code>font-size: clamp(1rem, 1rem + 1cqi, 2rem);</code>

wobei 1cqi 1% der Inline -Größe des Behälters entspricht. (Weitere Einzelheiten finden Sie in der Entwurfsspezifikation).

chris hob auch die Leistungsvorteile von Edge Computing hervor. Selbst nachdem ich seine früheren Artikel zu diesem Thema gelesen hatte, erlangte ich ein tieferes Verständnis des Konzepts. Global verteilte CDNs dienen aufgrund ihrer geografischen Nähe zu Benutzern effizient Vermögenswerte. Dies erstreckt sich über die Bilder über statische HTML-, CSS- und JavaScript -Dateien hinaus - dem Kern des Jamstack -Ansatzes. Selbst dynamische Daten abrufen können jedoch integriert, vorgefertigt, statisch auf Demand serviert und mit unglaublicher Geschwindigkeit von der Kante geliefert werden.

tolu adegbite: Mastering Aria für Web -Barrierefreiheit

Tolu Adegbite's Präsentation war außergewöhnlich! Ihre umfassende Berichterstattung über Wai-Aria-Rollen, Staaten, Kennzeichnung, Beschreibungen-war von unschätzbarem Wert. Ein wesentlicher Erfolg bestand darin, die Zugänglichkeit von Inline SVG zu verbessern. Da SVG Markup ist, wird es nicht immer als Bild erkannt. Um die Hilfstechnologie korrekt zu gewährleisten, interpretiert sie die entsprechenden Rollen und Etiketten:

Falsch:

<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy" alt="Some Things I Took Away From An Event Apart 2022 in Denver "><svg viewbox="0 0 100 100"></svg>

richtig:

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

Miriam Suzanne: Zähmung der CSS -Spezifität mit Kaskadenschichten

Miriam Suzannes Vortrag konzentrierte sich auf die Kaskadenschichtenspezifikation (und ihren begleitenden CSS-Tricks-Leitfaden). Die Schlüsselverschiebung ist die Verwaltung der Spezifität. Während das Konzept - die Deklaration von @layer, die Bestellung von Ebenen und Schreibstilen in ihnen - unkompliziert ist, muss sich an die Anpassung an die Anpassung an die Vorrang des Selektors erfordern. Ein einfacher Klassenwählers kann jetzt je nach Schichtreihenfolge einen ID -Selektor überschreiben.

Kaskadenschichten sowie Selektoren wie :is(), :where() und :has() bieten eine leistungsstarke Spezifitätskontrolle. Miriam betonte auch, wie Kaskadenschichten den Überbeanspruchung von !important ansprechen, was die Priorisierung von Schichten und den Schutz der Erbschaft ermöglicht.

Dave Rupert: Eroberung Ihres Backlogs

Dave Rupert teilte seine Erfahrung mit einem massiven Backlog der Barrierefreiheitsprüfung. Durch die Organisation der Probleme im Begriff identifizierte er wiederkehrende Probleme auf mehreren Seiten und verringerte die Arbeitsbelastung erheblich. Sein Ansatz betonte die Priorisierung individueller Probleme und das Verständnis des Kontexts, anstatt sich ausschließlich auf automatisierte Tools zu verlassen. Diese Umstrukturierung verbesserte auch sein Verständnis der Auswirkungen auf Benutzer mit unterschiedlichen Beeinträchtigungen, Förderung von Empathie und besserer Priorisierung.

Ich habe leider einen Teil von Hui Jing Chens letzter Sitzung aufgrund eines Flurgesprächs verpasst, aber ich habe vor, die Aufnahme zu sehen, sofern verfügbar.

Das obige ist der detaillierte Inhalt vonEinige Dinge, die ich von einem Ereignis 2022 in Denver abgebaut habe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Flexbox vs Grid: Soll ich sie beide lernen?Flexbox vs Grid: Soll ich sie beide lernen?May 10, 2025 am 12:01 AM

Ja, youShouldlearnbothflexBoxandgrid.1) FlexBoxiSidealfore-dimensional, flexibelayoutslikenAvigationMenus.2) GridexcelStwo-dimensional, komplexDesignsuchasmagazinelayouts.3) Kombininierungs-Botenhances-Flexible-und-und -Anteilungskraft, und -forsfossivität,

Orbitalmechanik (oder wie ich eine CSS -Keyframes -Animation optimiert habe)Orbitalmechanik (oder wie ich eine CSS -Keyframes -Animation optimiert habe)May 09, 2025 am 09:57 AM

Wie sieht es aus, Ihren eigenen Code neu zu gestalten? John Rhea nimmt eine alte CSS -Animation auseinander, die er geschrieben hat, und geht durch den Denkprozess der Optimierung.

CSS -Animationen: Ist es schwierig, sie zu erstellen?CSS -Animationen: Ist es schwierig, sie zu erstellen?May 09, 2025 am 12:03 AM

CsSanimationsarenotinherenthardbutRequirePractICEANDUnDing-fordertofcsPropertiesandTimingfunktionen.1) StartwithsimpleanimationslikescalingabuttononoversKeyFrames.2) useaSingFunctionslikecubic-BezierForteffects, SuchasabouNects, SuchasabouNects,, zu

@Keyframes CSS: Die am häufigsten verwendeten Tricks@Keyframes CSS: Die am häufigsten verwendeten TricksMay 08, 2025 am 12:13 AM

@KeyFramesispopulardUeToitSverSatility und PowerIncreatingsmoothcsSanimations.KectrickSinclude: 1) DefiningsmoothTransitionSbetTates, 2) AnimatingMultipleProperTiesimultan, 3) mit VendorprefixesforBrowserCompatible, 4) Kombinieren, 4) Kombinieren, 4) Kombinieren, 4) Kombinieren, 4) Kombinieren

CSS -Zähler: Eine umfassende Anleitung zur automatischen NummerierungCSS -Zähler: Eine umfassende Anleitung zur automatischen NummerierungMay 07, 2025 pm 03:45 PM

CSSCOUSTERSSARUSTOMANAGEAUTOMATICNUMBERINGINWEBDEsigns.1) Sie konzipieren SieForsofcontents, ListItems und CustomNumbering.2) AdvanceduSesincnednumberingSystem.3) CHEFORDIGESINCLUDSERCOMPATIBILIBLEISE.4) CreativeuSinvolvecustInance

Moderne Bildlaufschatten mit scrollengetriebenen AnimationenModerne Bildlaufschatten mit scrollengetriebenen AnimationenMay 07, 2025 am 10:34 AM

Die Verwendung von Scroll -Schatten, insbesondere für mobile Geräte, ist ein subtiles Stück UX, das Chris zuvor abgedeckt hat. Geoff deckte einen neueren Ansatz ab, der die Immobilie der Animationszeit verwendet. Hier ist ein anderer Weg.

Überprüfung der BildkartenÜberprüfung der BildkartenMay 07, 2025 am 09:40 AM

Lassen Sie uns eine kurze Auffrischung durchlaufen. Bildkarten datieren bis zu HTML 3.2, wobei zuerst die serverseitigen Karten und dann die clientseitigen Karten klickbare Regionen über ein Bild mit Karten- und Bereichselementen definiert sind.

Stand der Entwickler: Eine Umfrage für jeden EntwicklerStand der Entwickler: Eine Umfrage für jeden EntwicklerMay 07, 2025 am 09:30 AM

Die Umfrage von State of Devs ist nun offen für die Teilnahme und deckt im Gegensatz zu früheren Umfragen alles außer Code ab: Karriere, Arbeitsplatz, aber auch Gesundheit, Hobbys und mehr. 

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Nordhold: Fusionssystem, erklärt
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
Mandragora: Flüstern des Hexenbaum
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung