CSS

Der Browser bestimmt, welche Stile für ein Element angezeigt werden, abhängig von der Spezifität der CSS-Regeln. Wir gehen davon aus, dass der Browser die Regeln, die auf ein bestimmtes Element zutreffen, bereits ermittelt hat. Unter den übereinstimmenden Regeln wird die Spezifität, vier durch Kommas getrennte Werte, a, b, c, d für jede Regel basierend auf Folgendem berechnet:

1. a ist, ob Inline-Styles verwendet werden. Wenn die Eigenschaftsdeklaration ein Inline-Style für das Element ist, ist a 1, sonst 0.
2. b ist die Anzahl der ID-Selektoren.
3. c ist die Anzahl der Klassen-, Attribut- und Pseudoklassen-Selektoren.
4. d ist die Anzahl der Tag- und Pseudoelement-Selektoren.

Die resultierende Spezifität ist keine Punktzahl, sondern eine Matrix von Werten, die Spalte für Spalte verglichen werden können. Beim Vergleich von Selektoren, um festzustellen, welcher die höchste Spezifität hat, schauen Sie von links nach rechts und vergleichen Sie den höchsten Wert in jeder Spalte. Ein Wert in Spalte b überschreibt also Werte in den Spalten c und d, egal wie diese aussehen mögen. Daher wäre eine Spezifität von 0,1,0,0 größer als eine von 0,0,10,10.

Bei gleicher Spezifität zählt die letzte Regel. Wenn Sie dieselbe Regel zweimal in Ihrem Stylesheet (unabhängig von intern oder extern) geschrieben haben, dann ist die untere Regel in Ihrem Stylesheet näher an dem zu stylenden Element, sie wird als spezifischer angesehen und daher angewendet.

Ich würde CSS-Regeln mit geringer Spezifität schreiben, damit sie bei Bedarf leicht überschrieben werden können. Beim Schreiben von CSS-UI-Komponentenbibliotheks-Code ist es wichtig, dass sie geringe Spezifitäten haben, damit Benutzer der Bibliothek sie überschreiben können, ohne zu komplizierte CSS-Regeln nur zur Erhöhung der Spezifität oder zur Verwendung von !important verwenden zu müssen.

• Zurücksetzen - Zurücksetzen soll alle standardmäßigen Browser-Styles auf Elementen entfernen. Z.B. werden margins, paddings, font-sizes aller Elemente auf denselben Wert zurückgesetzt. Sie müssen die Formatierung für gemeinsame typografische Elemente neu deklarieren.
• Normalisieren - Normalisieren bewahrt nützliche Standard-Styles, anstatt alles zu "entstylen". Es korrigiert auch Fehler bei gängigen Browser-Abhängigkeiten.

Ich würde das Zurücksetzen wählen, wenn ich ein sehr angepasstes oder unkonventionelles Website-Design habe, so dass ich viel eigenes Styling vornehmen muss und keine Standard-Styles beibehalten werden sollen.

Float ist eine CSS-Positionierungseigenschaft. Gefloatete Elemente bleiben Teil des Seitenflusses und beeinflussen die Positionierung anderer Elemente (z.B. fließt Text um gefloatete Elemente), im Gegensatz zu position: absolute-Elementen, die aus dem Seitenfluss entfernt werden.

Die CSS-Eigenschaft clear kann verwendet werden, um unterhalb von left/right/both gefloateten Elementen positioniert zu werden.

Wenn ein Elternelement nichts als gefloatete Elemente enthält, wird seine Höhe auf Null reduziert. Dies kann behoben werden, indem der Float nach den gefloateten Elementen im Container, aber vor dem Abschluss des Containers gelöscht wird.

Der .clearfix-Hack verwendet einen cleveren CSS-Pseudo-Selektor (::after), um Floats zu löschen. Anstatt den Overflow des Elternelements festzulegen, wenden Sie eine zusätzliche Klasse clearfix darauf an. Wenden Sie dann dieses CSS an:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Alternativ können Sie dem Elternelement die Eigenschaft overflow: auto oder overflow: hidden geben, wodurch ein neuer Blockformatierungskontext innerhalb der Kinder eingerichtet wird und es sich ausdehnt, um seine Kinder zu enthalten.

Die Eigenschaft z-index in CSS steuert die vertikale Stapelreihenfolge von Elementen, die sich überlappen. z-index beeinflusst nur Elemente, die einen position-Wert haben, der nicht static ist.

Ohne einen z-index-Wert stapeln sich Elemente in der Reihenfolge, in der sie im DOM erscheinen (das unterste auf der gleichen Hierarchieebene erscheint oben). Elemente mit nicht-statischer Positionierung (und ihre Kinder) erscheinen immer über Elementen mit standardmäßiger statischer Positionierung, unabhängig von der HTML-Hierarchie.

Ein Stacking-Kontext ist ein Element, das eine Reihe von Ebenen enthält. Innerhalb eines lokalen Stacking-Kontexts werden die z-index-Werte seiner Kinder relativ zu diesem Element und nicht zur Dokumentwurzel festgelegt. Ebenen außerhalb dieses Kontexts – d.h. Geschwisterelemente eines lokalen Stacking-Kontexts – können sich nicht zwischen Ebenen innerhalb davon befinden. Wenn ein Element B über Element A liegt, kann ein Kindelement von Element A, Element C, niemals höher sein als Element B, selbst wenn Element C einen höheren z-index als Element B hat.

Jeder Stacking-Kontext ist eigenständig – nachdem die Inhalte des Elements gestapelt wurden, wird das gesamte Element in der Stapelreihenfolge des übergeordneten Stacking-Kontexts berücksichtigt. Eine Handvoll CSS-Eigenschaften lösen einen neuen Stacking-Kontext aus, wie z.B. opacity kleiner als 1, filter ungleich none und transform ungleich none.

_Hinweis: Was genau ein Element dazu befähigt, einen Stacking-Kontext zu erstellen, ist in dieser langen Reihe von [Regeln] aufgeführt.

Ein Block Formatting Context (BFC) ist Teil des visuellen CSS-Renderings einer Webseite, in dem Block-Boxes angeordnet werden. Floats, absolut positionierte Elemente, inline-blocks, table-cells, table-captions und Elemente mit overflow außer visible (außer wenn dieser Wert an den Viewport weitergegeben wurde) etablieren neue Block-Formatierungs-Kontexte.

Zu wissen, wie man einen Block-Formatierungs-Kontext etabliert, ist wichtig, denn andernfalls wird die enthaltende Box keine [geflexten Kinder enthalten]. Dies ähnelt dem Zusammenfallen von Rändern, ist aber heimtückischer, da ganze Boxen auf merkwürdige Weise zusammenfallen werden.

Ein BFC ist eine HTML-Box, die mindestens eine der folgenden Bedingungen erfüllt:

• Der Wert von float ist nicht none.
• Der Wert von position ist weder static noch relative.
• Der Wert von display ist table-cell, table-caption, inline-block, flex oder inline-flex, grid oder inline-grid.
• Der Wert von overflow ist nicht visible.

In einem BFC berührt die linke Außenkante jeder Box die linke Kante des enthaltenden Blocks (für die Formatierung von rechts nach links berühren die rechten Kanten).

Vertikale Ränder zwischen benachbarten Block-Level-Boxes in einem BFC kollabieren. Lesen Sie mehr über [kollabierende Ränder].

• Leere div-Methode - <div style="clear:both;"></div>.
• Clearfix-Methode - Siehe die .clearfix-Klasse oben.
• overflow: auto oder overflow: hidden Methode - Das Elternelement etabliert einen neuen Block-Formatierungskontext und dehnt sich aus, um seine gefloateten Kindelemente zu enthalten.

In großen Projekten würde ich eine Utility-Klasse .clearfix schreiben und sie an den Stellen verwenden, wo ich sie brauche. overflow: hidden könnte Kinder abschneiden, wenn die Kinder größer als das Elternelement sind und ist nicht sehr ideal.

CSS-Sprites kombinieren mehrere Bilder zu einem einzigen größeren Bild. Es ist eine häufig verwendete Technik für Icons (Gmail verwendet sie). So wird sie implementiert:

1. Verwenden Sie einen Sprite-Generator, der mehrere Bilder zu einem zusammenfügt und das entsprechende CSS dafür generiert.
2. Jedes Bild hätte eine entsprechende CSS-Klasse mit definierten background-image, background-position und background-size-Eigenschaften.
3. Um dieses Bild zu verwenden, fügen Sie die entsprechende Klasse zu Ihrem Element hinzu.

Vorteile:

• Reduziert die Anzahl der HTTP-Anfragen für mehrere Bilder (nur eine einzige Anfrage pro Spritesheet ist erforderlich). Aber mit HTTP2 ist das Laden mehrerer Bilder kein großes Problem mehr.
• Vorab-Download von Assets, die erst bei Bedarf heruntergeladen werden, wie z.B. Bilder, die nur bei :hover-Pseudozuständen erscheinen. Ein Blinken würde nicht zu sehen sein.

• Nachdem Sie das Problem und den verursachenden Browser identifiziert haben, verwenden Sie ein separates Stylesheet, das nur geladen wird, wenn dieser bestimmte Browser verwendet wird. Diese Technik erfordert jedoch serverseitiges Rendering.
• Verwenden Sie Bibliotheken wie Bootstrap, die diese Styling-Probleme bereits für Sie lösen.
• Verwenden Sie autoprefixer, um automatisch Herstellerpräfixe zu Ihrem Code hinzuzufügen.
• Verwenden Sie Reset CSS oder Normalize.css.
• Wenn Sie Postcss (oder eine ähnliche Transpiling-Bibliothek) verwenden, gibt es möglicherweise Plugins, die es Ihnen ermöglichen, moderne CSS-Syntax (und sogar W3C-Vorschläge) zu verwenden, die diese Abschnitte Ihres Codes in entsprechenden sicheren Code umwandeln, der in den von Ihnen verwendeten Zielen funktioniert.

• Graceful Degradation - Die Praxis, eine Anwendung für moderne Browser zu entwickeln und gleichzeitig sicherzustellen, dass sie in älteren Browsern funktionsfähig bleibt.
• Progressive Enhancement - Die Praxis, eine Anwendung für ein Grundniveau der Benutzerfreundlichkeit zu entwickeln, aber funktionale Verbesserungen hinzuzufügen, wenn ein Browser diese unterstützt.
• Verwenden Sie [caniuse.com], um die Unterstützung von Funktionen zu überprüfen.
• Autoprefixer für die automatische Einfügung von Herstellerpräfixen.
• Feature-Erkennung mit [Modernizr].
• Verwenden Sie CSS-Feature-Queries [@support]

Diese Techniken beziehen sich auf die Barrierefreiheit (a11y).

• width: 0; height: 0. Das Element nimmt überhaupt keinen Platz auf dem Bildschirm ein, was dazu führt, dass es nicht angezeigt wird.
• position: absolute; left: -99999px. Positionieren Sie es außerhalb des Bildschirms.
• text-indent: -9999px. Dies funktioniert nur bei Text innerhalb der block-Elemente. Dies ist ein weit verbreiteter und bekannter Trick, aber er hat [einige Nachteile] wie die Verursachung von Leistungsproblemen, daher sollten Sie stattdessen text-indent: 100% in Betracht ziehen.
• Meta-Tags. Zum Beispiel durch die Verwendung von Schema.org, RDF und JSON-LD.
• WAI-ARIA. Eine technische Spezifikation des W3C, die festlegt, wie die Zugänglichkeit von Webseiten erhöht werden kann.

Auch wenn WAI-ARIA die ideale Lösung ist, würde ich den Ansatz der absolute-Positionierung wählen, da er die geringsten Fallstricke aufweist, für die meisten Elemente funktioniert und eine einfache Technik ist.

Bevor Flex populär wurde (um 2014), war das float-basierte Rastersystem das zuverlässigste, da es unter den alternativen bestehenden Systemen (flex, grid) immer noch die größte Browserunterstützung hatte. Bootstrap verwendete den float-Ansatz bis Bootstrap 4, das auf den flex-basierten Ansatz umstellte. Zum Zeitpunkt des Schreibens (2020) ist flex der empfohlene Ansatz zum Aufbau von Rastersystemen und verfügt über [anständige Browserunterstützung].

Für die Abenteuerlustigen gibt es [CSS Grid Layout], das die glänzende neue grid-Eigenschaft verwendet; es ist sogar besser als flex für den Aufbau von Rasterlayouts und wird in Zukunft die De-facto-Methode dafür sein.

Ja. Ein Beispiel wäre die Umwandlung einer gestapelten Pillennavigation in eine am unteren Rand fixierte Tab-Navigation jenseits eines bestimmten Breakpoints.

Ja, es gibt verschiedene Möglichkeiten, Formen zu färben (einschließlich der Angabe von Attributen am Objekt) mithilfe von Inline-CSS, einem eingebetteten CSS-Abschnitt oder einer externen CSS-Datei. Die meisten SVGs, die Sie im Web finden, verwenden Inline-CSS, aber es gibt Vor- und Nachteile, die mit jedem Typ verbunden sind.

Grundlegendes Färben kann durch Setzen von zwei Attributen am Knoten erfolgen: fill und stroke. fill legt die Farbe innerhalb des Objekts fest und stroke legt die Farbe der um das Objekt gezeichneten Linie fest. Sie können die gleichen CSS-Farbbenennungsschemata verwenden, die Sie in HTML verwenden, sei es Farbnamen (d.h. red), RGB-Werte (d.h. rgb(255,0,0)), Hex-Werte, RGBA-Werte usw.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

Das obige fill="purple" ist ein Beispiel für ein präsentationsbezogenes Attribut. Interessanterweise können und werden präsentationsbezogene Attribute, anders als Inline-Styles wie style="fill: purple", die ebenfalls ein Attribut sind, von CSS-Stilen, die in einem Stylesheet definiert sind, [überschrieben]. Wenn Sie also so etwas wie svg { fill: blue; } tun würden, würde dies die von uns definierte violette Füllung überschreiben.

Ja, es gibt vier Arten von @media-Eigenschaften (einschließlich screen):

• all - für alle Medientyp-Geräte
• print - für Drucker
• speech - für Screenreader, die die Seite laut "lesen"
• screen - für Computerbildschirme, Tablets, Smartphones usw.

Hier ist ein Beispiel für die Verwendung des Medientyps print:

@media print {
  body {
    color: black;
  }
}

Zunächst sollte man verstehen, dass Browser Selektoren von rechts (Schlüsselselektor) nach links abgleichen. Browser filtern Elemente im DOM gemäß dem Schlüsselselektor heraus und durchlaufen deren Elternelemente nach oben, um Übereinstimmungen zu bestimmen. Je kürzer die Länge der Selektorkette, desto schneller kann der Browser feststellen, ob dieses Element dem Selektor entspricht. Vermeiden Sie daher Schlüsselselektoren, die Tag- und Universalselektoren sind. Sie stimmen mit einer großen Anzahl von Elementen überein, und Browser müssen mehr Arbeit leisten, um festzustellen, ob die Eltern übereinstimmen.

Die [BEM (Block Element Modifier)]-Methodologie empfiehlt, dass alles eine einzige Klasse hat, und wo Hierarchie benötigt wird, wird dies auch in den Namen der Klasse eingearbeitet, was den Selektor natürlich effizient und leicht zu überschreiben macht.

Beachten Sie, welche CSS-Eigenschaften [Reflow, Repaint und Compositing] auslösen. Vermeiden Sie das Schreiben von Stilen, die das Layout ändern (Reflow auslösen), wo immer möglich.

Vorteile:

• CSS wird wartungsfreundlicher.
• Einfaches Schreiben verschachtelter Selektoren.
• Variablen für konsistentes Theming. Theme-Dateien können über verschiedene Projekte hinweg geteilt werden.
• Mixins zur Generierung wiederholten CSS.
• Sass-Funktionen wie Schleifen, Listen und Maps können die Konfiguration vereinfachen und weniger ausführlich machen.
• Aufteilen Ihres Codes in mehrere Dateien. CSS-Dateien können ebenfalls aufgeteilt werden, aber dies erfordert eine HTTP-Anfrage, um jede CSS-Datei herunterzuladen.

Nachteile:

• Erfordert Tools für die Vorverarbeitung. Die Neukompilierungszeit kann langsam sein.
• Keine aktuell und potenziell nutzbares CSS schreiben. Zum Beispiel können Sie mit etwas wie [postcss-loader] mit [webpack] potenziell zukunftskompatibles CSS schreiben, sodass Sie Dinge wie CSS-Variablen anstelle von Sass-Variablen verwenden können. So lernen Sie neue Fähigkeiten, die sich auszahlen könnten, wenn sie standardisiert werden.

Gefällt:

• Hauptsächlich die oben genannten Vorteile.
• Weniger wird in JavaScript geschrieben, was gut mit Node harmoniert.

Gefällt nicht:

• Ich verwende Sass über node-sass, ein Binding für LibSass, das in C++ geschrieben ist. Ich muss es häufig neu kompilieren, wenn ich zwischen Node-Versionen wechsle.
• In Less sind Variablennamen mit @ präfixiert, was mit nativen CSS-Keywords wie @media, @import und @font-face verwechselt werden kann.

Verwenden Sie @font-face und definieren Sie font-family für verschiedene font-weights.

Dieser Teil bezieht sich auf das oben Gesagte zum Thema effizientes CSS schreiben. Browser gleichen Selektoren von rechts (Schlüsselselektor) nach links ab. Browser filtern Elemente im DOM gemäß dem Schlüsselselektor heraus und durchlaufen deren Elternelemente nach oben, um Übereinstimmungen zu bestimmen. Je kürzer die Länge der Selektorkette, desto schneller kann der Browser feststellen, ob dieses Element dem Selektor entspricht.

Zum Beispiel bei diesem Selektor p span finden Browser zuerst alle <span>-Elemente und durchlaufen deren Eltern bis zum Root, um das <p>-Element zu finden. Für ein bestimmtes <span> weiß der Browser, sobald er ein <p> findet, dass das <span> übereinstimmt und kann seine Übereinstimmungssuche beenden.

Ein CSS-Pseudoelement ist ein Schlüsselwort, das einem Selektor hinzugefügt wird und es Ihnen ermöglicht, einen bestimmten Teil der ausgewählten Elemente zu gestalten. Sie können zur Dekoration (:first-line, :first-letter) oder zum Hinzufügen von Elementen zum Markup (in Kombination mit content: ...) verwendet werden, ohne das Markup ändern zu müssen (:before, :after).

• :first-line und :first-letter können verwendet werden, um Text zu dekorieren.
• Wird im .clearfix-Hack wie oben gezeigt verwendet, um ein Leerelement mit clear: both hinzuzufügen.
• Dreieckige Pfeile in Tooltips verwenden :before und :after. Fördert die Trennung der Belange, da das Dreieck als Teil des Stylings und nicht wirklich des DOM betrachtet wird.

Das CSS-Box-Modell beschreibt die rechteckigen Boxen, die für Elemente im Dokumentbaum generiert und gemäß dem visuellen Formatierungsmodell angeordnet werden. Jede Box hat einen Inhaltsbereich (z.B. Text, ein Bild usw.) und optionale umgebende padding-, border- und margin-Bereiche.

Das CSS-Box-Modell ist für die Berechnung zuständig:

• Wie viel Platz ein Blockelement einnimmt.
• Ob Ränder und/oder Abstände überlappen oder kollabieren.
• Die Abmessungen einer Box.

Das Box-Modell hat die folgenden Regeln:

• Die Abmessungen eines Blockelements werden durch width, height, padding, borders und margins berechnet.
• Wenn keine height angegeben ist, ist ein Blockelement so hoch wie der Inhalt, den es enthält, plus padding (es sei denn, es gibt Floats, dazu siehe unten).
• Wenn keine width angegeben ist, dehnt sich ein nicht gefloatetes Blockelement aus, um die Breite seines Elternelements abzüglich padding auszufüllen.
• Die height eines Elements wird durch die height des Inhalts berechnet.
• Die width eines Elements wird durch die width des Inhalts berechnet.
• Standardmäßig sind paddings und borders nicht Teil der width und height eines Elements.

• Standardmäßig haben Elemente box-sizing: content-box angewendet, und nur die Inhaltsgröße wird berücksichtigt.
• box-sizing: border-box ändert, wie die width und height von Elementen berechnet werden, border und padding werden ebenfalls in die Berechnung einbezogen.
• Die height eines Elements wird nun durch die height des Inhalts + vertikale padding + vertikale border-Breite berechnet.
• Die width eines Elements wird nun durch die width des Inhalts + horizontale padding + horizontale border-Breite berechnet.
• Die Berücksichtigung von paddings und borders als Teil unseres Box-Modells stimmt besser mit der Vorstellung von Designern über Inhalte in Rastern überein.

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item.

| display | Beschreibung | | :-- | :-- | | none | Zeigt kein Element an (das Element beeinflusst das Layout des Dokuments nicht mehr). Alle Kindelemente werden ebenfalls nicht mehr angezeigt. Das Dokument wird so gerendert, als ob das Element im Dokumentbaum nicht existierte | | block | Das Element nimmt die gesamte Zeile in Blockrichtung (normalerweise horizontal) ein | | inline | Elemente können nebeneinander angeordnet werden | | inline-block | Ähnlich wie inline, erlaubt aber einige block-Eigenschaften wie das Setzen von width und height | | table | Verhält sich wie das <table>-Element | | table-row | Verhält sich wie das <tr>-Element | | table-cell | Verhält sich wie das <td>-Element | | list-item | Verhält sich wie ein <li>-Element, das es ihm ermöglicht, list-style-type und list-style-position zu definieren |

Ich werde zum besseren Verständnis einen Vergleich mit block anstellen.

| | block | inline-block | inline | | --- | --- | --- | --- | | Größe | Füllt die Breite seines übergeordneten Containers aus. | Abhängig vom Inhalt. | Abhängig vom Inhalt. | | Positionierung | Beginnt in einer neuen Zeile und duldet keine HTML-Elemente daneben (außer wenn Sie float hinzufügen) | Fließt zusammen mit anderem Inhalt und erlaubt andere Elemente daneben. | Fließt zusammen mit anderem Inhalt und erlaubt andere Elemente daneben. | | Kann width und height angeben | Ja | Ja | Nein. Wird ignoriert, wenn gesetzt. | | Kann mit vertical-align ausgerichtet werden | Nein | Ja | Ja | | Ränder und Abstände | Alle Seiten werden respektiert. | Alle Seiten werden respektiert. | Nur horizontale Seiten werden respektiert. Vertikale Seiten, falls angegeben, beeinflussen das Layout nicht. Der vertikale Raum, den es einnimmt, hängt von der line-height ab, auch wenn der border und padding visuell um den Inhalt herum erscheinen. | | Float | - | - | Wird wie ein block-Element, bei dem Sie vertikale Ränder und Abstände festlegen können. |

Ein positioniertes Element ist ein Element, dessen berechnete position-Eigenschaft entweder relative, absolute, fixed oder sticky ist.

• static - Die Standardposition; das Element fließt normal in die Seite ein. Die Eigenschaften top, right, bottom, left und z-index haben keine Auswirkung.
• relative - Die Position des Elements wird relativ zu sich selbst angepasst, ohne das Layout zu ändern (und hinterlässt somit eine Lücke für das Element, wo es gewesen wäre, wenn es nicht positioniert worden wäre).
• absolute - Das Element wird aus dem Seitenfluss entfernt und an einer angegebenen Position relativ zu seinem nächsten positionierten Vorfahren, falls vorhanden, oder andernfalls relativ zum anfänglichen enthaltenden Block positioniert. Absolut positionierte Boxen können Ränder haben, und diese kollabieren nicht mit anderen Rändern. Diese Elemente beeinflussen die Position anderer Elemente nicht.
• fixed - Das Element wird aus dem Seitenfluss entfernt und an einer angegebenen Position relativ zum Viewport positioniert und bewegt sich beim Scrollen nicht.
• sticky - Sticky-Positionierung ist eine Mischung aus relativer und fester Positionierung. Das Element wird als relative positioniert behandelt, bis es einen bestimmten Schwellenwert überschreitet, an welchem Punkt es als fixed positioniert behandelt wird.

• Bootstrap - Langsamer Veröffentlichungszyklus. Bootstrap 4 war fast 2 Jahre lang in der Alpha-Phase. Spinner-Button-Komponente hinzufügen, da sie weit verbreitet ist.
• Semantic UI - Die Struktur des Quellcodes macht die Theme-Anpassung extrem schwer verständlich. Das unkonventionelle Theming-System ist schmerzhaft anzupassen. Fest codierter Konfigurationspfad innerhalb der Anbieterbibliothek. Nicht gut für das Überschreiben von Variablen konzipiert, anders als in Bootstrap.
• Bulma - Viele nicht-semantische und überflüssige Klassen und Markup erforderlich. Nicht abwärtskompatibel. Das Upgrade von Versionen führt zu subtilen Fehlern in der App.

Ja. Flexbox ist hauptsächlich für 1-dimensionale Layouts gedacht, während Grid für 2-dimensionale Layouts gedacht ist.

Flexbox löst viele häufige Probleme in CSS, wie das vertikale Zentrieren von Elementen innerhalb eines Containers, Sticky Footer usw. Bootstrap und Bulma basieren auf Flexbox, und es ist heutzutage wahrscheinlich die empfohlene Methode zum Erstellen von Layouts. Habe Flexbox schon einmal ausprobiert, bin aber auf einige Browser-Inkompatibilitätsprobleme (Safari) bei der Verwendung von flex-grow gestoßen, und ich musste meinen Code mit inline-blocks und Mathematik umschreiben, um die Breiten in Prozent zu berechnen, es war keine schöne Erfahrung.

Grid ist bei weitem der intuitivste Ansatz zum Erstellen von rasterbasierten Layouts (das sollte es auch sein!), aber die Browserunterstützung ist derzeit nicht weit verbreitet.

Beachten Sie, dass diese beiden Ansätze nicht exklusiv sind.

Eine Website responsiv zu gestalten bedeutet, dass einige Elemente ihre Größe oder andere Funktionalitäten an die Bildschirmgröße des Geräts anpassen, typischerweise an die Viewport-Breite, durch CSS-Media-Queries, zum Beispiel die Schriftgröße auf kleineren Geräten zu verringern.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Eine Mobile-First-Strategie ist ebenfalls responsiv, stimmt jedoch darin überein, dass wir standardmäßig alle Stile für mobile Geräte definieren und erst später spezifische responsive Regeln für andere Geräte hinzufügen sollten. Nach dem vorherigen Beispiel:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Eine Mobile-First-Strategie hat 2 Hauptvorteile:

• Sie ist auf mobilen Geräten performanter, da alle für sie geltenden Regeln nicht gegen Media-Queries validiert werden müssen.
• Sie zwingt dazu, saubereren Code in Bezug auf responsive CSS-Regeln zu schreiben.

Sowohl responsives als auch adaptives Design versuchen, die Benutzererfahrung auf verschiedenen Geräten zu optimieren, indem sie sich an unterschiedliche Viewport-Größen, Auflösungen, Nutzungskontexte, Steuermechanismen usw. anpassen.

Responsives Design basiert auf dem Prinzip der Flexibilität – eine einzige flüssige Website, die auf jedem Gerät gut aussehen kann. Responsive Websites verwenden Medienabfragen, flexible Raster und responsive Bilder, um eine Benutzererfahrung zu schaffen, die sich basierend auf einer Vielzahl von Faktoren anpasst und ändert. Wie ein einzelner Ball, der wächst oder schrumpft, um durch mehrere verschiedene Reifen zu passen.

Adaptives Design ähnelt eher der modernen Definition von progressiver Verbesserung. Anstatt eines einzigen flexiblen Designs erkennt adaptives Design das Gerät und andere Funktionen und stellt dann die entsprechende Funktion und das Layout basierend auf einem vordefinierten Satz von Viewport-Größen und anderen Eigenschaften bereit. Die Website erkennt den verwendeten Gerätetyp und liefert das voreingestellte Layout für dieses Gerät. Anstatt eines einzelnen Balls, der durch mehrere unterschiedlich große Reifen geht, hätte man mehrere verschiedene Bälle, die je nach Reifengröße verwendet werden.

Beide Methoden haben einige Probleme, die abgewogen werden müssen:

• Responsives Design kann ziemlich herausfordernd sein, da man im Wesentlichen ein einziges, wenn auch responsives Layout verwendet, um alle Situationen abzudecken. Wie die Media Query Breakpoints gesetzt werden, ist eine solche Herausforderung. Verwenden Sie standardisierte Breakpoint-Werte? Oder verwenden Sie Breakpoints, die für Ihr spezifisches Layout sinnvoll sind? Was ist, wenn sich dieses Layout ändert?
• Adaptives Design erfordert im Allgemeinen die Erkennung des Benutzeragenten oder der DPI usw., was sich alles als unzuverlässig erweisen kann.

Retina ist lediglich ein Marketingbegriff für hochauflösende Bildschirme mit einem Pixeldichte-Verhältnis größer als 1. Wichtig ist, dass diese Displays durch die Verwendung eines Pixeldichte-Verhältnisses eine geringere Auflösung emulieren, um Elemente in der gleichen Größe anzuzeigen. Heutzutage betrachten wir alle mobilen Geräte de facto als Retina-Displays.

Browser rendern DOM-Elemente standardmäßig entsprechend der Geräteauflösung, außer bei Bildern.

Um gestochen scharfe, gut aussehende Grafiken zu erhalten, die die Retina-Displays optimal nutzen, müssen wir wann immer möglich hochauflösende Bilder verwenden. Die ständige Verwendung von Bildern höchster Auflösung hat jedoch Auswirkungen auf die Leistung, da mehr Bytes über die Leitung gesendet werden müssen.

Um dieses Problem zu lösen, können wir responsive Bilder verwenden, wie in HTML5 spezifiziert. Dies erfordert, dass dem Browser verschiedene Auflösungsdateien desselben Bildes zur Verfügung gestellt werden und der Browser selbst entscheidet, welches Bild am besten ist, indem er das HTML-Attribut srcset und optional sizes verwendet, zum Beispiel:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

Es ist wichtig zu beachten, dass Browser, die HTML5s srcset nicht unterstützen (z.B. IE11), es ignorieren und stattdessen src verwenden. Wenn wir IE11 unbedingt unterstützen müssen und diese Funktion aus Performance-Gründen bereitstellen wollen, können wir ein JavaScript-Polyfill verwenden, z.B.

Für Icons würde ich auch SVGs und Icon-Fonts verwenden, wo immer möglich, da sie unabhängig von der Auflösung sehr scharf gerendert werden.

translate() ist ein Wert von CSS transform. Das Ändern von transform oder opacity löst keinen Browser-Reflow oder Repaint aus, aber Kompositionen; wohingegen das Ändern der absoluten Positionierung reflow auslöst. transform veranlasst den Browser, eine GPU-Ebene für das Element zu erstellen, aber das Ändern der absoluten Positionierungseigenschaften verwendet die CPU. Daher ist translate() effizienter und führt zu kürzeren Malzeiten für flüssigere Animationen.

Bei der Verwendung von translate() nimmt das Element immer noch seinen ursprünglichen Platz ein (ähnlich wie position: relative), im Gegensatz zur Änderung der absoluten Positionierung.