Einige praktische CSS-Tipps


    CSS Protips

    Dies sind moderne Lösungen für häufig auftretende Probleme und eine Sammlung von Tipps, mit denen Sie Ihre professionellen CSS-Kenntnisse verbessern können.

    Vom Übersetzer

    Grüße, eine andere Übersetzung von CSS-bezogenen Notizen wurde für Sie vorbereitet. Der Portland-Entwickler Matt Smith hat CSS-Tipps geteilt und auf GitHub gepostet . Besonders gut hat mir seine Auswahl gefallen, sie ist strukturiert, in Bezug auf langweilige große Texte und Beschreibungen nicht besonders umständlich, und im Allgemeinen wird es auch einem Anfänger klar sein. Ich würde mich freuen, wenn wir in den Kommentaren jeden Punkt besprechen und eventuell einige Schlussfolgerungen ziehen. Also fangen wir an.



    Inhalt


    1. Wir verwenden die Pseudoklasse: um den Navigationsrahmen nicht zu setzen.
    2. Fügen Sie dem Hauptteil einen Zeilenabstand hinzu
    3. Alles vertikal zentrieren
    4. Trennen Sie Listenelemente korrekt mit Kommas
    5. Negative Seriennummer im n-ten Kind
    6. Wir verwenden SVG-Logos
    7. Axiomatisches CSS
    8. Maximale Höhe des CSS-Schiebereglers
    9. Box-Sizing übernehmen
    10. Gleiche Zellenbreite
    11. Dynamische Einrückung mit Flexbox
    12. Wir verwenden den Attributselektor für leere Links
    13. Standardstile für einfache Links


    Wir verwenden die Pseudoklasse: um den Navigationsrahmen nicht zu setzen.


    Anstatt die Grenze auf diese Weise zu setzen ...
    /* добавляем рамку */
    .nav li {
      border-right: 1px solid #666;
    }
    

    ... und sogar den Rand auf das letzte Element zurücksetzen ...
    /* удаляем рамку */
    .nav li:last-child {
      border-right: none;
    }
    

    ... Sie können einfach die Pseudoklasse: not () verwenden, um nur die Elemente auszuwählen, die wir benötigen:
    .nav li:not(:last-child) {
      border-right: 1px solid #666;
    }
    

    Natürlich können Sie eine solche Auswahl verwenden .nav li + li oder sogar .nav li: first-child ~ li . Wenn wir jedoch absichtlich not () verwenden, ist es uns klar, dass CSS den Rahmen für alle Elemente außer dem letzten und jetzt definiert Jeder wird verstehen, was hier passiert. Diese Methode wird unter anderem in IE9 + unterstützt.

    Fügen Sie dem Hauptteil einen Zeilenabstand hinzu


    Sie sollten nicht für jeden Absatz oder jede Überschrift eine Zeilenhöhe hinzufügen (<p>, ) definiert jedes Element. Fügen Sie stattdessen den folgenden Code zum Hauptteil des Hauptteilelements hinzu:
    body {
      line-height: 1;
    }
    

    Auf diese Weise erben alle Textelemente diese Eigenschaft vom übergeordneten Hauptelement.

    Alles vertikal zentrieren


    Nein, das ist keine schwarze Magie, Sie können wirklich jedes Element vertikal zentrieren:
    html, body {
      height: 100%;
      margin: 0;
    }
    body {
      -webkit-align-items: center;  
      -ms-flex-align: center;  
      align-items: center;
      display: -webkit-flex;
      display: flex;
    }
    

    Willst du irgendwie anders zentrieren? Vertikal, horizontal ... irgendwie irgendwo? Bei CSS-Tricks können Sie den Artikel lesen und dann alles tun, was Sie wollen. Das Beispiel unterstützt IE11 + und den Rest.

    Hinweis : Folgen Sie den Flexbox-Fehlern in IE11 und steuern Sie den HTML-Layout-Prozess.

    Trennen Sie Listenelemente korrekt mit Kommas


    Wir können unsere li- Elemente so gestalten, dass sie wirklich wie eine echte Liste aussehen, deren Einträge durch Kommas getrennt sind:
    ul > li:not(:last-child)::after {
      content: ",";
    }
    

    Mit der Pseudoklasse: not () fügen wir nach jedem ul-Listenelement außer dem letzten ein Komma hinzu.

    Negative Seriennummer im n-ten Kind


    Verwenden Sie negative Argumente in n-child, um die Elemente 1 bis n auszuwählen.
    li {
      display: none;
    }
    /* выбираем элементы с 1 по 3 и отображаем их */
    li:nth-child(-n+3) {
      display: block;
    }
    

    Oder jetzt, da wir alles über die Verwendung der Pseudo-Klasse wissen: not (), können wir Folgendes versuchen:
    /* скрываем все элемента ul-списка, кроме элементов с 1 по 3 */
    li:not(:nth-child(-n+3)) {
      display: none;
    }
    

    Das war ziemlich einfach.

    Wir verwenden SVG-Logos


    Nein, kein Grund, SVG nicht zu verwenden:
    .logo {
      background: url("logo.svg");
    }
    

    SVG lässt sich gut auf jede Auflösung skalieren und wird in allen Browsern (IE9 +) unterstützt. Jetzt können wir svg anstelle von .png-, .jpg- oder .gif-Dateien verwenden.

    Hinweis : Wenn Sie nur für eine Schaltfläche ein SVG-Symbol haben und die SVG noch nicht geladen wurde, können Sie die verfügbare Eingabeaufforderung verwenden:
    .no-svg .icon-only::after {
      content: attr(aria-label);
    }
    


    Axiomatisches CSS


    Lobotomisierte Eule (axiomatisches CSS), ja, das ist ein ziemlich seltsamer Name, aber mit dem universellen Selektor (*) und dem einstufigen Selektor (+) erhalten Sie leistungsstarke CSS-Funktionen:
    * + * {
      margin-top: 1.5em;
    }
    

    In diesem Beispiel sollten alle Elemente im Stream, die sich nach einem anderen Element befinden, einen Einzug von 1.5em erhalten . Weitere Informationen zur " lobotomisierten Eule" finden Sie in einem Artikel von Haydon Pickering oder in einer Übersetzung in Russisch .

    Maximale Höhe des CSS-Schiebereglers


    Sie können den CSS-Schieberegler mit "max-height" und "overflow: hidden" implementieren :
    .slider ul {
      max-height: 0;
      overflow: hidden;
    }
    .slider:hover ul {
      max-height: 1000px;
      transition: .3s ease; /* анимация для max-height */
    }
    


    Box-Sizing übernehmen


    Lassen Sie die Boxgröße von HTML erben:
    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }
    

    Jetzt ist es für uns einfacher, die Boxgröße in Plugins oder Komponenten zu steuern, die ihre eigenen Verhaltensregeln verwenden. Unterstützung in IE8 + und dem Rest.

    Gleiche Zellenbreite


    Manchmal kann das Arbeiten von Tabellen schmerzhaft sein. Verwenden Sie daher das Tabellenlayout: Es wurden die folgenden Probleme behoben , um Zellen mit derselben Breite zu verwenden:
    .calendar {
      table-layout: fixed;
    }
    

    Wir werden den Schmerz mit dem Tabellenlayout los . Unterstützung in IE8 + und dem Rest.

    Dynamische Einrückung mit Flexbox


    Wenn mit Spaltenlayout arbeiten, können Sie loswerden CSS-Selektoren erhalten mit nth- * , ersten * und Last-Kind mit Flexbox Werten platz für Between :
    .list {
      display: flex;
      justify-content: space-between;
    }
    .list .person {
      flex-basis: 23%; /* базовый размер отдельно взятого блока */
    }
    

    Unterstützung in IE11 + und anderen.

    Wir verwenden den Attributselektor für leere Links


    Anzeigen von Links, wenn das a-Element keinen Textwert hat, das href-Attribut jedoch einen Link enthält:
    a[href^="http"]:empty::before {
      content: attr(href);
    }
    

    Das ist ziemlich praktisch. Unterstützung in IE9 + und dem Rest.

    Standardstile für einfache Links


    Standardlinkstil hinzufügen:
    a[href]:not([class]) {
      color: #008000;
      text-decoration: underline;
    }
    

    Jetzt unterscheiden sich die über den visuellen Editor Ihres CMS eingefügten Links, die normalerweise keine Klasse haben, von den übrigen Links, ohne dass dies Auswirkungen auf die Kaskade hat.

    Jetzt auch beliebt: