Share
In diesem Lernprogramm setzen wir unsere Diskussion über Elementabfragen fort und wenden uns zum Erstellen einer wiederverwendbaren responsiven Komponente.
Um es zusammenzufassen: Elementabfragen ermöglichen es uns, ein Element basierend auf den Eigenschaften des Containers zu formen. die Breite, Höhe und so weiter. Es sollte jedoch darauf hingewiesen werden, dass Elementabfragen noch lange nicht zu einem CSS-Standard werden, und wir werden wahrscheinlich ein paar Jahre warten müssen, bevor dies geschieht.
Daher müssen wir zunächst auf eine JavaScript-Bibliothek zurückgreifen, um ähnliche Funktionen wie EQCSS zu emulieren.
EQCSS ist eine JavaScript-Bibliothek, die von Tommy Hodgins entwickelt wurde. Schauen wir uns einige Gründe an, warum Sie sich für diese Bibliothek entschieden haben.
Zunächst bietet EQCSS eine ähnliche Syntax wie der Standard CSS3 Media Queries mit dem @Element Erklärung. Dies funktioniert in einem Stylesheet oder eingebettet in ein Stil Element, daher sehr intuitiv. Im folgenden Code stapeln wir beispielsweise die Menüs in der Navigation, um den schrumpfenden Speicherbereich der Navigation (nicht des Ansichtsfensters) zu bewältigen.
.Navigation .menu Anzeige: Inline-Block; @element ".navigation" und (max-width: 480px) .navigation .menu display: block;
EQCSS bietet mehr als nur Abfragen, die auf Breite oder Höhe basieren. Es bietet auch Count-basierte Abfragen, mit denen wir Stilregeln basierend auf dem Inhalt anwenden können. die Anzahl der enthaltenen Zeichen, Zeilen und Elemente.
.tweetContent // textarea background-color: #eaeaea; @element ".tweetContent" und (Min-Zeichen: 100) .tweetContent background-color: # ffc04d; // orange @element ".tweetContent" und (Min-Zeichen: 140) .tweetContent Hintergrundfarbe: # FF3333; // rote Farbe: #fff;
Es unterstützt verschiedene CSS-Einheiten, einschließlich der neuesten Erweiterungen vw, vh, vmin, und vmax.
Und für diejenigen, die noch Unterstützung für IE8 benötigen, bietet EQCSS eine Polyfill.
EQCSS ist über Bower, NPM, CDNJS und direkt aus dem Repository in Github verfügbar. Entscheiden Sie sich für die Verkaufsstelle, die zu Ihrer Projektbereitstellung passt, und stellen Sie sicher, dass sie in Ihre Seite geladen wird.
Lass uns jetzt etwas bauen!
Wir werden eine Benutzeroberflächenkomponente für Benutzerprofile erstellen und beginnen mit dem HTML-Markup.
Louie R.
Mittelerde
Ein Entwickler und häufiger StackOverflow-Reader. Geboren, aufgewachsen und im Web leben. Ich spreche drei Sprachen: HTML, CSS und JavaScript.
Unsere Komponente besteht aus einem Avatar-Bild, dem Benutzernamen, dem Ort, an dem sie leben, einer kurzen Biografie und einer Schaltfläche "Folgen" a la Twitter und Medium.
Zuerst setzen wir die Containerbreite der UI-Komponente und den Anzeigemodus auf biegen. Die Flexbox-Syntax im folgenden Codeausschnitt ist der Übersichtlichkeit halber uneingeschränkt und funktioniert daher nur in den neuesten Browsern. Bei Bedarf können Sie immer Autoprefixer verwenden, um ältere Syntax zu generieren, sowie Herstellerpräfixe, um ältere Browser zu unterstützen.
.Benutzerprofil Breite: 100%; Max-Breite: 640px; Anzeige: Flex;
Als Nächstes legen wir das Breitenverhältnis zwischen dem Avatar-Bild und der Profilzusammenfassung fest, die Name, Ort und kurze Biografie enthält.
.Benutzerprofil__avatar Breite: 25%; Max-Breite: 120px; flex: 1 1 120px; .user-profile__summary width: 75%; Polsterung links: 25px; Schriftgröße: 1em;
Wir passen auch die Schriftgröße des Benutzernamens und den Ort etwas an.
.user-profile__name font-family: 'Montserrat', serifenlos; Schriftgröße: 1.3125em; .user-profile__location font-size: 0.87em;
Dies sind die primären Stilregeln, mit denen die Funktionsweise von Elementabfragen veranschaulicht wird. Die stilistischen Regeln wie Hintergrundfarbe, Text Farbe, und Box Schatten Ganz nach Ihrem Geschmack. In meinem Fall sieht es folgendermaßen aus.
Die Verwendung von Elementabfragen mit EQCSS ist sehr intuitiv. Wie bereits erwähnt, ähnelt die Syntax den CSS-Medienabfragen. Zunächst bezeichnen wir, wie bereits gezeigt, eine Elementabfrage mit @Element gefolgt mit ein oder mehrere Elementselektoren und die Abfragebedingung wie die Breite, die Höhe, die Scrollposition usw. des Elements.
@element 'Header, Nav, Footer' und (min-width: 100px) und (min-height: min-height: 300px) // Stilregeln
Wir können es jetzt in unserer UI-Komponente bereitstellen, um beispielsweise die Breite des Elements innerhalb des Containers zu ändern und die Schriftgröße anzupassen, wenn die Containerbreite reduziert wird.
@element '.user-profile' und (max-width: 540px) .user-profile font-size: 0.75em; .user-profile__avatar max-width: 80px;
Außerdem möchten wir, dass die UI-Komponente unabhängig von der verfügbaren Breite in jedem Teil der Website wiederverwendbar und vor allem auch darstellbar ist. Zum Beispiel die Seitenleiste, deren Breite normalerweise kleiner als ist 400px. In diesem Fall müssen wir, da die Breite viel schmaler ist neu ausrichten das gesamte Layout der Komponente.
@element '.user-profile' und (max-Breite: 380px) .user-profile padding-top: 30px; Polsterung unten: 30px; Bildschirmsperre; Text ausrichten: Mitte; .user-profile__avatar, .user-profile__summary width: 100%; .user-profile__avatar margin-right: auto; Rand unten: 20px; Rand links: auto; .user-profile__summary padding-left: 0;
In diesem Lernprogramm haben wir eine UI-Komponente zur Anzeige eines Benutzerprofils erstellt. Es reagiert auf Änderungen und ändert sich je nach Container anstelle des Ansichtsfensters. Sie können die Demo-Seite anzeigen und sehen, dass sich das Layout unabhängig von der Größe des Ansichtsfensters ändert. Ordentlich!
Dies ist nur ein Beispiel. Es gibt einige andere Beispiele, auf die andere hingewiesen haben, wo Elementabfragen sinnvoll sind.
Merken; Die Syntax in diesem Tutorial basiert vollständig auf EQCSS. Ob die W3C-Arbeitsgruppe sie übernehmen wird oder ob sie ihre eigene erstellt, ist noch nicht entschieden. Ich freue mich jedoch darauf, dass diese Idee angenommen wird und die Art und Weise, wie wir Websites erstellen, erneut revolutioniert.
Accentsconagua
