7 Dinge, von denen Sie nicht wussten, dass Sie sie mit CSS machen können

Ob Sie es glauben oder nicht, CSS und JavaScript beginnen sich zu überschneiden, genau wie CSS weitere Funktionen hinzufügt. Als ich „5 Möglichkeiten, wie CSS und JavaScript sich gegenseitig beeinflussen, Sie wissen vielleicht nicht“ schrieb, waren die Leute überrascht, wie überlappend JavaScript und CSS sind. Heute werde ich 7 Dinge hervorheben, die Sie mit CSS machen können – ohne JavaScript oder Bilder.

CSS@supports

Jeder gute Frontend-Entwickler muss Funktionstests durchführen, wenn er Funktionen verwendet, die in einigen Browsern möglicherweise nicht verfügbar sind. Funktionstests wurden schon immer in JavaScript durchgeführt, und viele Leute verwenden Modernizr, ein hervorragendes Dienstprogramm, das aus vielen gut getesteten Fällen besteht, um Funktionstests durchzuführen. Eine neue API: @supports ist jedoch vor den Entwicklern aufgetaucht, [email protected] Ein einfaches Beispiel dafür, wie es funktioniert:

/* basic usage */
@supports(prop:value) {
/* more styles */
}
/* real usage */
@supports (display: flex) {
div { display: flex; }
}
/* testing prefixes too */
@supports (display: -webkit-flex) or
          (display: -moz-flex) or
          (display: flex) {
    section {
      display: -webkit-flex;
      display: -moz-flex;
    display: flex;
    float: none;
    }
}

Diese neue @supports-Funktion hat auch eine entsprechende JavaScript-Version, aber ist abgelaufen, wir freuen uns darauf, es bald zu verwenden!

CSS-Filter

Schreiben Sie einen Dienst, der den Farbton eines Bildes ändert, und Sie können es für Milliarden von Dollar an Facebook verkaufen. Sicher, das ist eine Selbstverständlichkeit, aber das Schreiben von Bildfiltern ist keine Wissenschaft. Ein kleines Programm, das ich in meiner ersten Woche bei Mozilla geschrieben habe (das einen Preis gewonnen hat, eh, ich sage es nur), hat etwas JS-basierte Mathematik verwendet, um Bildfilter mit Canvas zu erstellen, aber jetzt können wir Bilder mit CSS Filtered erstellen.

/* simple filter */
.myElement {
-webkit-filter: blur(2px);
}
/* advanced filter */
.myElement {
-webkit-filter: blur(2px) grayscale (.5) opacity(0.8) hue-rotate(120deg);
}

Dieser Filtertyp verändert lediglich das ursprüngliche Erscheinungsbild des Bildes. Der besagte Filter wird nicht beim Speichern oder Exportieren des Bildes verwendet, sondern wenn Sie das Foto verschönern oder das Poster bearbeiten müssen . Sehr nützlich.

Zeigerereignisse und Bricking-Klicks

Die CSS-Zeigerereignisse-Eigenschaft bietet eine Möglichkeit, ein Element effektiv zu deaktivieren, wenn über JavaScript auf einen Link geklickt wird :

/* do nothing when clicked or activated */
.disabled { pointer-events: none; }/* this will _not_ fire because of the pointer-events: none application */
document.getElementById("disabled-element").addEventListener("click", function(e) {
alert("Clicked!");
});

Im obigen Beispiel wird das Click-Ereignis aufgrund des CSS-Pointer-Events-Werts nicht ausgelöst. Ich habe festgestellt, dass dies eine große Hilfe ist. Sie müssen nicht überall den Klassennamen oder die Eigenschaften überprüfen, um sicherzustellen, dass ein Element deaktiviert ist.

Menü ein- und ausblenden

Mit CSS können wir Übergangseffekte und Animationen erstellen, aber oft benötigen wir JavaScript-Bibliotheken, die uns dabei helfen, einige Dinge zu ändern und Animationen zu steuern. Eine sehr beliebte Animation ist der Klapp- und Erweiterungsmenüeffekt. Viele Leute wissen nicht, dass er nur mit CSS erreicht werden kann!

/* slider in open state */
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
/* close it with the "closed" class */
.slider.closed {
max-height: 0;
}

Durch den geschickten Einsatz von Max-height können Elemente je nach gewünschtem Effekt zusammengeklappt und erweitert werden.

CSS-Zähler

Der Begriff „Zähler“ bringt uns im Internet oft zum Lachen, wenn man bedenkt, was er bedeutet, aber CSS-Zähler sind eine weitere Sache, die uns noch mehr zum Lachen bringt. Mit CSS-Zählern können Entwickler einen Zähler für ein bestimmtes Element mithilfe von :before und :after erhöhen:

/* initialize the counter */
ol.slides {
counter-reset: slideNum;
}
/* increment the counter */
ol.slides > li {
counter-increment: slideNum;
}
/* display the counter value */
ol.slides li:after {
content: "[" counter(slideNum) "]";
}

CSS-Zähler werden häufig in Diashow-Effekten und Listen wie Formularinhaltsübergeordneten verwendet.

Unicode-CSS-Stilnamen

Es gibt viele CSS-Best-Practice-Dokumente, und alle beginnen mit der Benennung von CSS-Stilen. Sie werden nie eine Dokumentation sehen, die besagt, dass Sie Ihre Stile mit Unicode-Symbolen benennen sollen:

.

ಠ_ಠ {
border: 1px solid #f00;
background: pink;
}
.❤ {
background: lightgreen;
border: 1px solid green;
}

Bitte verwenden Sie diese Symbole nicht. Es sei denn, du kannst!

CSS-Kreis

CSS-Dreieck ist eine technische Aktivität, und das Gleiche gilt für CSS-Kreis. Durch Missbrauch des CSS-Rahmenradius können Sie perfekte Kreise erstellen!

circle {
border-radius: 50%;
width: 200px;
height: 200px; 
/* width and height can be anything, as long as they're equal */
}

Sie können Ihren Kreisen Farbverläufe hinzufügen und sogar CSS-Animationen verwenden, um Ihre Kreise zu bewegen! CSS wird demnächst über einheitlichere APIs für diese Formen verfügen, aber vorerst können Sie Kreise auf diese Weise erstellen.