Artikel mit Schlagwort

Spoiler-Alarm: Es gibt noch keine Unterstützung dafür. Aber es ist in der Media Queries Level 5 Spezifikation definiert, die andere aktuelle, aber bekanntere Funktionen für Benutzereinstellungen wie prefers-color-scheme und prefers-reduced-motion enthält.

Der Polypane-Blog geht auf …

Media Queries können das Aussehen (und sogar das Verhalten) einer Website oder App basierend auf einer Reihe von Bedingungen über das Gerät, den Browser oder die Systemeinstellungen des Benutzers ändern.

Die Interaktions-Medienfunktionen der Media Queries Level 4 – pointer, hover, any-pointer und any-hover – sollen es Websites ermöglichen, unterschiedliche Stile und Funktionalitäten (entweder CSS-spezifische Interaktivität wie :hover oder JavaScript-Verhalten, wenn sie mit window.matchMedia abgefragt werden) zu implementieren, abhängig von den spezifischen Merkmalen des Eingabegeräts eines Benutzers.

Was fällt Ihnen als Erstes ein, wenn Sie an Media Queries denken? Vielleicht etwas in einer CSS-Datei, das so aussieht

body {
  background-color: plum;
}


@media (min-width: 768px) {
  body {
    background-color: tomato;
  }
}

CSS …

Eine der Herausforderungen bei der Implementierung von klassenbasiertem atomarem Styling besteht darin, dass es oft einen spezifischen Breakpoint für den Kontext benötigt. Wir können jeden Breakpoint voranstellen. Das funktioniert gut, bis wir beginnen, mehrere Klassen hinzuzufügen. Dann wird es schwierig, den Überblick zu behalten, was zu was gehört und wo man Dinge hinzufügen, entfernen oder ändern kann.

Favicons sind die kleinen Icons, die Sie in Ihrem Browser-Tab sehen. Sie helfen Ihnen zu verstehen, welche Seite welche ist, wenn Sie Ihre Lesezeichen und offenen Tabs durchsuchen. Sie sind ein schöner Teil der Internetgeschichte und fähig zu …

Mezo Istvan deckt das Problem und eine Lösung dafür gut in einem Blogbeitrag auf Medium ab. Wenn Sie auf etwas tippen, das einen :hover-Zustand hat, aber die Seite nicht verlassen, besteht auf einem Mobilgerät die Chance, dass der :hover-Zustand "haften" bleibt. Dies sehen Sie bei Dingen wie Sprunglinks, die als Tabs oder Buttons verwendet werden, die Funktionalität auf der Seite auslösen.

Container-Queries stehen immer ganz oben auf der Liste der gewünschten Verbesserungen für CSS. Die allgemeine Meinung ist, dass wir, wenn wir Container-Queries hätten, nicht so viele globale Media Queries basierend auf der Seitengröße schreiben würden. Das liegt daran, dass wir ...

Ja, das können Sie, und die Reihenfolge spielt eigentlich keine Rolle. Ein CSS-Präprozessor ist nicht erforderlich. Es funktioniert in normalem CSS.

This works

@supports(--a: b) {
  @media (min-width: 1px) {
    body {
      background: red;
    }
  }
}

Und so …