CSS, über die du dich im Jahr 2015 freuen kannst
CSS ist eine sich ständig weiterentwickelnde Sprache, und zu Beginn des neuen Jahres ist es eine gute Zeit, sich einige der neuen Features anzusehen, mit denen wir experimentieren können.
In diesem Artikel werde ich einige neuere Module und einzelne CSS-Funktionen betrachten, die Browser-Unterstützung erhalten. Nicht alle diese Funktionen können sofort in der Produktion verwendet werden und einige sind nur hinter experimentellen Flags verfügbar. Sie werden hier jedoch viele Dinge finden, mit denen Sie anfangen können zu spielen - wenn auch nur während einer Prototypenentwicklungsphase.
CSS Selektoren Ebene 4
Die Level-3-Selektoren-Spezifikation ist in Browsern gut implementiert und hat uns nützliche Selektoren wie nth-child gebracht. Selektoren Ebene 4 bringt uns noch mehr Möglichkeiten, Inhalte mit CSS anzusprechen.
Die Negation Pseudo-Klasse: nicht
Der Negations-Pseudo-Klassen-Selektor : erscheint nicht in Level 3, sondern erhält ein Upgrade in Level 4. In Level 3 können Sie einen Selektor übergeben, um zu sagen, dass Sie nicht möchten, dass das CSS auf dieses Element angewendet wird. Um den gesamten Text außer Text mit einer fettgedruckten Einschubklasse zu erstellen, können Sie die folgende Regel verwenden.
p:not(.intro) { font-weight: normal; }In Level 4 der Spezifikation können Sie eine durch Kommas getrennte Liste von Selektoren übergeben.
p:not(.intro, blockquote) { font-weight: normal; }Die relationale Pseudoklasse: hat
Diese Pseudo-Klasse nimmt eine Auswahlliste als Argument und wird übereinstimmen, wenn einer dieser Selektoren mit einem Element übereinstimmt. Am einfachsten ist dies an einem Beispiel zu sehen. In diesem Beispiel wird für alle Elemente, die ein Bild enthalten, der schwarze Rand angewendet:
a:has( > img ) { border: 1px solid #000; }In diesem zweiten Beispiel kombiniere ich : hat mit : not und selektiert nur li- Elemente, die kein Absatzelement enthalten:
li:not(:has(p)) { padding-bottom: 1em; }Die Matches - jede Pseudo-Klasse: passt
Diese Pseudoklasse bedeutet, dass wir Regeln auf Gruppen von Selektoren anwenden können, zum Beispiel:
p:matches(.alert, .error, .warn) { color: red; }Um Ihren Browser auf Unterstützung für diese und andere erweiterte Selektoren zu testen, können Sie den Test aktivieren css4-selectors.com. Diese Site ist auch eine großartige Quelle, um mehr über kommende Selektoren zu erfahren.
CSS-Mischmodi
Wenn Sie sich mit den Füllmethoden in Photoshop auskennen, könnten Sie Interesse an der Compositing- und Blending-Spezifikation. Diese Spezifikation erlaubt uns, Mischmodi auf Hintergründe und HTML-Elemente im Browser anzuwenden.
Im folgenden CSS habe ich eine Box mit einem Hintergrundbild. Indem ich eine Hintergrundfarbe hinzufüge und dann den Background-Blend-Modus auf "hue" und "multiply" setze, kann ich interessante Effekte auf die Bilder anwenden.
.box {background-image: url(balloons.jpg);}.box2 {background-color: red;background-blend-mode: hue;}.box3 {background-color: blue;background-blend-mode: multiply;}
Hintergrund-Mischmodus verwenden
Die Mix-Blend-Modus-Eigenschaft ermöglicht es Ihnen, Text über einem Bild zu mischen. Im folgenden Beispiel habe ich eine h1 und dann in .box2 den Mischmodus : Bildschirm.
.box {background-image: url(balloons-large.jpg);}.box h1 {font-size: 140px;color: green;}.box2 h1 {mix-blend-mode: screen;}
Verwenden des Mix-Blend-Modus
CSS Blend Modes haben tatsächlich eine überraschend gute Unterstützung in modernen Browsern außer dem Internet Explorer, siehe die Support Matrix für Hintergrund-Blend-Modus Der Mix-Blend-Modus ist in Safari und Firefox verfügbar und hinter der Funktion für experimentelle Funktionen in Opera und Chrome. Bei sorgfältiger Verwendung ist dies genau die Art von Spezifikation, mit der Sie anfangen können, um Ihre Designs zu verbessern, solange das Fallback in nicht unterstützenden Browsern keine Unlesbarkeit zulässt.
Wenn Sie ältere Browser umfassender unterstützen müssen und die Mischmodi noch nicht in der Produktion verwendet werden können, vergessen Sie nicht, dass Sie diese während der Entwicklung verwenden können, um Reisen durch Photoshop zu vermeiden. Sobald Sie Bilder und Behandlungen abgeschlossen haben, erstellen Sie die Produktionsbilder in einem Grafikprogramm und ersetzen die CSS-Effekte.
Erfahren Sie mehr über die Verwendung von Mischmodi mit Dieser praktische Artikel über CSS Tricks , im die Ressourcen auf der Adobe-Website und auf der Entwickler-Website.
Die Funktion calc ()
Die Funktion calc () ist Teil des CSS Werte und Einheiten Modul Level 3. Das bedeutet, dass Sie mathematische Funktionen direkt in Ihrem CSS ausführen können.
Eine einfache Verwendung von calc () finden Sie, wenn Sie ein Hintergrundbild von der unteren rechten Ecke eines Elements positionieren möchten. Ein Element 30px von oben links zu positionieren ist einfach, Sie würden verwenden:
.box {background-image: url(check.png);background-position: 30px 30px;}Sie können das jedoch nicht von rechts unten tun, wenn Sie die Abmessungen des Containers nicht kennen. Mit den Funktionen von calc () können Sie unsere 30 Pixel von 100% der Breite oder Höhe abziehen:
.box {background-image: url(check.png);background-position: calc(100% - 30px) calc(100% - 30px);}Die Browserunterstützung für calc () ist jedoch in modernen Browsern gut Kann ich benutzen meldet, dass die Verwendung als Hintergrundpositionswert in IE9 zum Absturz des Browsers führt.
CSS Trickery und Calc-Funktion ist ein lustiger Artikel über die Verwendung von calc (), um ein CSS-Problem zu lösen. Es gibt einige einfache Anwendungsfälle bei CSS Tricks.
CSS-Variablen
Eine leistungsstarke Funktion von CSS-Vorprozessoren wie Sass ist die Möglichkeit, Variablen in unserem CSS zu verwenden. Auf einer sehr einfachen Ebene können wir viel Zeit sparen, indem wir die Farben und Schriften in unserem Design deklarieren und dann eine Variable verwenden, wenn wir eine bestimmte Farbe oder Schriftart verwenden. Wenn wir dann entscheiden, eine Schriftart oder die Farbpalette zu optimieren, müssen wir nur diese Werte an einer Stelle ändern.
CSS Variablen, beschrieben in der Benutzerdefinierte CSS-Eigenschaften für Cascading Variables-Modulebene 1, bringt diese Funktionalität in CSS.
:root {--color-main: #333333;--color-alert: #ffecef;}.error { color: var(--color-alert); }Leider Browser-Unterstützung für CSS-Variablen ist derzeit auf Firefox beschränkt.
Sie können weitere Beispiele sehen und mehr darüber erfahren Dieser Artikel zum Mozilla Developer Network.
CSS-Ausschlüsse
Wir alle kennen Floats in CSS. Das einfachste Beispiel könnte sein, ein Bild zu schweben, um Text um es herum fließen zu lassen. Schweberahmen sind jedoch ziemlich begrenzt, da das schwebende Element immer nach oben steigt. Während wir also ein Bild nach links schweben lassen und den Text nach rechts und unten verschieben können, gibt es keine Möglichkeit, ein Bild in die Mitte des Dokuments zu legen und Text zu fließen ganz herum oder positionieren Sie es an der Unterseite und lassen Sie Text um die Oberseite und die Seite fließen.
Ausschlüsse Ermöglicht das Umschließen von Text um alle Seiten eines positionierten Objekts. Es definiert keine neue Methode der Positionierung selbst, kann also in Verbindung mit anderen Methoden verwendet werden. Im folgenden Beispiel positioniere ich ein Element absolut über einem Textblock und deklariere dieses Element dann als Ausschluss mit der Eigenschaft wrap-flow mit einem Wert von beiden, so dass der Text dann die Position des Elements berücksichtigt und umläuft es.
.main {position:relative;}.exclusion {position: absolute;top: 14em;left: 14em;width: 320px;wrap-flow: both;}
Ausschlüsse im Internet Explorer
Browser-Unterstützung für Ausschlüsse und Wrap-Flow: Beide sind derzeit auf IE10 + beschränkt und erfordern ein -ms Präfix. Beachten Sie, dass Ausschlüsse bis vor kurzem mit der CSS-Shapes-Spezifikation verknüpft waren, die ich als Nächstes anschaue, sodass einige der Online-Informationen die beiden zusammenfassen.
CSS-Formen
Die Exclusions-Spezifikation behandelt das Umbrechen von Text um rechteckige Objekte. Formen bringen uns die viel mächtigere Fähigkeit, Text um nicht-rechteckige Objekte zu wickeln, z. B. fließenden Text um eine Kurve.
Level 1 der CSS-Shapes-Spezifikation Definiert eine neue Eigenschaft shape-outside. Diese Eigenschaft kann für ein Floated-Element verwendet werden. Im folgenden Beispiel verwende ich Shape-Outside, um Text um ein Floating-Bild zu krümmen.
.shape {width: 300px;float: left;shape-outside: circle(50%);}
Mit CSS Shapes können wir Text um das Ballonbild herum krümmen
Browserunterstützung für Shapes Level 1 umfasst Chrome und Safari, was bedeutet, dass Sie es in Stylesheets für iOS-Geräte verwenden könnten. Mit Level 2 der Spezifikation können Sie Text innerhalb von Elementen mit der Shape-Inside- Eigenschaft gestalten, sodass von dieser Funktion mehr zu erwarten ist.
Lesen Sie mehr über Formen in diesem Artikel von Sara Soueidan , und die begleitenden Ressourcen.
CSS-Gitter-Layout
Ich habe meinen Favoriten bis zuletzt verlassen. Ich bin seit der frühen Implementierung in Internet Explorer 10 ein großer Fan der aufkommenden Grid Layout-Spezifikation. CSS Grid Layout gibt uns die Möglichkeit, mit CSS richtige Grid-Strukturen zu erstellen und unser Design auf dieses Grid zu positionieren.
Das Rasterlayout bietet uns eine Methode zum Erstellen von Strukturen, die der Verwendung von Tabellen für das Layout nicht unähnlich sind. Da sie jedoch in CSS und nicht in HTML beschrieben sind, können sie Layouts erstellen, die mithilfe von Medienabfragen neu definiert und an verschiedene Kontexte angepasst werden können. Dadurch können wir die Reihenfolge der Elemente in der Quelle von ihrer visuellen Darstellung trennen. Als Designer bedeutet dies, dass Sie die Position der Seitenelemente an den verschiedenen Haltepunkten optimal für Ihr Layout ändern können und kein sensibel strukturiertes Dokument für Ihr Responsive Design kompromittieren müssen. Im Gegensatz zu einem HTML-Tabellenlayout können Sie Elemente im Raster übereinanderlegen. So kann ein Gegenstand bei Bedarf einen anderen überlappen.
Im folgenden Beispiel deklarieren wir ein Raster für das Element mit der Klasse .wrapper. Es hat drei 100 Pixel breite Spalten mit 10 px Rinnen und drei Zeilen. Wir positionieren die Boxen innerhalb des Gitters mit Hilfe von Zeilennummern vor und nach, oberhalb und unterhalb des Bereichs, in dem das Element angezeigt werden soll.
Grid Example ABCDEF
Das Rasterbeispiel in Chrome
Browserunterstützung Die neueste Grid-Spezifikation ist auf Chrome beschränkt, wenn das Flag "experimentelle Web-Plattform-Funktionen" aktiviert ist. Es gibt eine solide Implementierung der ursprünglichen Version der Spezifikation in Internet Explorer 10 und höher.
Erfahren Sie mehr über Grid Layout auf meinem Gitter nach Beispiel Website, auf der Sie mehrere Grid-Beispiele sehen können, die in Chrome funktionieren und experimentelle Web-Plattform-Funktionen aktiviert haben. Ich habe auch letztes Jahr bei CSS Conf EU on Grid gesprochen und Sie können dieses Video sehen Hier.
Haben Sie eine Lieblingsspezifikation, die hier nicht erwähnt wird?
Ich hoffe, Sie haben diese kurze Tour durch einige der interessantesten, neueren Features von CSS genossen. Verwenden Sie die verlinkten Ressourcen, um mehr über die Funktionen zu erfahren, die Sie am interessantesten fanden. Lassen Sie mich in den Kommentaren wissen, ob Sie ein beliebtes kommendes CSS-Feature haben, von dem Sie denken, dass es die Leute kennen sollten, oder zusätzliche großartige Ressourcen und Beispiele für eines der Features, die ich beschrieben habe.