@@Rolf B > Ob man medienspezifischen CSS Files macht, die über einen Media-Selektor im link-Element oder im @import-Statement aktiviert werden, hängt wohl von der Größe des medienspezifischen Teils ab. Ist er klein, würde ich eine CSS Datei mit @media print {...} und @media screen {...} Bereichen machen. Ansonsten würde ich link-Elemente mit media-Attribut verwenden, damit der Browser die CSS gleichzeitig laden kann. > > Liege ich damit richtig? Nein. Als **Nutzer** möchte man, dass Webseiten möglichst **schnell** laden. Wenn wir nicht über HTTP/2 sprechen, heißt das: möglichst wenig HTTP-Requests. *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. Als **Entwickler** möchte man, dass Code möglichst **wartbar** ist. Dass eine Änderung nur an einer Stelle getätigt werden muss, nicht dieselbe Änderung an mehreren Stellen. Wenn das Druckstylesheet nicht gänzlich anders aussehen soll als das Bildschirmstylesheet (und das soll es nicht – gewisse Dinge wie grundlegendes Layout, Schriftart, Aussehen von Komponenten werden gleich sein), dann heißt das: *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. Nicht mehrere `<link rel="stylesheet">`{:.language-html}, nicht `@import()`{:.language-css} im Stylesheet. In dem *einen* Stylesheet werden dann per *media queries*{:@en} gezielt Angaben für bestimmte Ausgabemedien gemacht. Bspw. ~~~CSS html { background: hsl(0, 0%, 20%); color: white; font: 1em/1.4 Georgia, serif; } @media print { html { background: white; color: black; font-size: 12pt; } } nav { background: black; } nav ul { display: flex; list-style: none; } @media print { nav { display: none; } } a { color: hsl(0, 100%, 70%); } a:focus, a:hover { color: hsl(0, 100%, 80%); } @media print { a, a:focus, a:hover { color: inherit; text-decoration: inherit; } a::after { content: ' (' attr(href) ')'; } } ~~~ LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Rolf B > Ob man medienspezifischen CSS Files macht, die über einen Media-Selektor im link-Element oder im @import-Statement aktiviert werden, hängt wohl von der Größe des medienspezifischen Teils ab. Ist er klein, würde ich eine CSS Datei mit @media print {...} und @media screen {...} Bereichen machen. Ansonsten würde ich link-Elemente mit media-Attribut verwenden, damit der Browser die CSS gleichzeitig laden kann. > > Liege ich damit richtig? Nein. Als **Nutzer** möchte man, dass Webseiten möglichst **schnell** laden. Wenn wir nicht über HTTP/2 sprechen, heißt das: möglichst wenig HTTP-Requests. *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. Als **Entwickler** möchte man, dass Code möglichst **wartbar** ist. Dass eine Änderung nur an einer Stelle getätigt werden muss, nicht dieselbe Änderung an mehreren Stellen. Wenn das Druckstylesheet nicht gänzlich anders aussehen soll als das Bildschirmstylesheet (und das soll es nicht – gewisse Dinge wie grundlegendes Layout, Schriftart, Aussehen von Komponenten werden gleich sein), dann heißt das: *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. Nicht mehrere `<link rel="stylesheet">`{:.language-html}, nicht `@import()`{:.language-css} im Stylesheet. In dem *einen* Stylesheet werden dann per *media queries*{:@en} gezielt Angaben für bestimmte Ausgabemedien gemacht. Bspw. ~~~CSS html { background: hsl(0, 0%, 20%); color: white; font: 1em/1.4 Georgia, serif; } @media (print) { html { background: white; color: black; font-size: 12pt; } } nav { background: black; } nav ul { display: flex; list-style: none; } @media (print) { nav { display: none; } } a { color: hsl(0, 100%, 70%); } a:focus, a:hover { color: hsl(0, 100%, 80%); } @media (print) { a, a:focus, a:hover { color: inherit; text-decoration: inherit; } a::after { content: ' (' attr(href) ')'; } } ~~~ LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Rolf B > Ob man medienspezifischen CSS Files macht, die über einen Media-Selektor im link-Element oder im @import-Statement aktiviert werden, hängt wohl von der Größe des medienspezifischen Teils ab. Ist er klein, würde ich eine CSS Datei mit @media print {...} und @media screen {...} Bereichen machen. Ansonsten würde ich link-Elemente mit media-Attribut verwenden, damit der Browser die CSS gleichzeitig laden kann. > > Liege ich damit richtig? Nein. Als **Nutzer** möchte man, dass Webseiten möglichst **schnell** laden. Wenn wir nicht über HTTP/2 sprechen, heißt das: möglichst wenig HTTP-Requests. *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. Als **Entwickler** möchte man, dass Code möglichst **wartbar** ist. Dass eine Änderung nur an einer Stelle getätigt werden muss, nicht dieselbe Änderung an mehreren Stellen. Wenn das Druckstylesheet nicht gänzlich anders aussehen soll als das Bildschirmstylesheet (und das soll es nicht – gewisse Dinge wie grundlegendes Layout, Schriftart, Aussehen von Komponenten werden gleich sein), dann heißt das: *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. Nicht mehrere `<link rel="stylesheet">`{:.language-html}, nicht `@import()`{:.language-css} im Stylesheet. In dem *einen* Stylesheet werden dann per *media queries*{:@en} gezielt Angaben für bestimmte Ausgabemedien gemacht. Bspw. ~~~CSS html { background: hsl(0, 0%, 20%); color: white; font: 1em/1.4 Georgia, serif; } @media (print) { html { background: white; color: black; font-size: 12pt; } } nav { background: black; } nav ul { display: flex; list-style: none; } @media (print) { nav { display: none; } } a { color: hsl(0, 100%, 70%); } a:focus, a:hover { color: hsl(0, 100%, 80%); } @media (print) { a { color: inherit; text-decoration: inherit; } a::after { content: ' (' attr(href) ')'; } } ~~~ LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Rolf B > Ob man medienspezifischen CSS Files macht, die über einen Media-Selektor im link-Element oder im @import-Statement aktiviert werden, hängt wohl von der Größe des medienspezifischen Teils ab. Ist er klein, würde ich eine CSS Datei mit @media print {...} und @media screen {...} Bereichen machen. Ansonsten würde ich link-Elemente mit media-Attribut verwenden, damit der Browser die CSS gleichzeitig laden kann. > > Liege ich damit richtig? Nein. Als **Nutzer** möchte man, dass Webseiten möglichst **schnell** laden. Wenn wir nicht über HTTP/2 sprechen, heißt das: möglichst wenig HTTP-Requests. *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. Als **Entwickler** möchte man, dass Code möglichst **wartbar** ist. Dass eine Änderung nur an einer Stelle getätigt werden muss, nicht dieselbe Änderung an mehreren Stellen. Wenn das Druckstylesheet nicht gänzlich anders aussehen soll als das Bildschirmstylesheet (und das soll es nicht – gewisse Dinge wie grundlegendes Layout, Schriftart, Aussehen von Komponenten werden gleich sein), dann heißt das: *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. Nicht mehrere `<link rel="stylesheet">`{:.language-html}, nicht `@import()`{:.language-css} im Stylesheet. In dem *einen* Stylesheet werden dann per *media queries*{:@en} geziehlt Angaben für bestimmte Ausgabemedien gemacht. Bspw. ~~~CSS html { background: hsl(0, 0%, 20%); color: white; font: 1em/1.4 Georgia, serif; } @media (print) { html { background: white; color: black; font-size: 12pt; } } nav { background: black; } nav ul { display: flex; list-style: none; } @media (print) { nav { display: none; } } a { color: hsl(0, 100%, 70%); } a:focus, a:hover { color: hsl(0, 100%, 80%); } @media (print) { a { color: inherit; text-decoration: inherit; } a::after { content: ' (' attr(href) ')'; } } ~~~ LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Rolf B > Ob man medienspezifischen CSS Files macht, die über einen Media-Selektor im link-Element oder im @import-Statement aktiviert werden, hängt wohl von der Größe des medienspezifischen Teils ab. Ist er klein, würde ich eine CSS Datei mit @media print {...} und @media screen {...} Bereichen machen. Ansonsten würde ich link-Elemente mit media-Attribut verwenden, damit der Browser die CSS gleichzeitig laden kann. > > Liege ich damit richtig? Nein. Als **Nutzer** möchte man, dass Webseiten möglichst **schnell** laden. Wenn wir nicht über HTTP/2 sprechen, heißt das: möglichst wenig HTTP-Requests. *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. Als **Entwickler** möchte man, dass Code möglichst **wartbar** ist. Dass eine Änderung nur an einer Stelle getätigt werden muss, nicht dieselbe Änderung an mehreren Stellen. Wenn das Druckstylesheet nicht gänzlich anders aussehen soll als das Bildschirmstylesheet (und das soll es nicht – gewisse Dinge wie grundlegendes Layout, Schriftart, Aussehen von Komponenten werden gleich sein), dann heißt das: *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. In dem *einen* Stylesheet werden dann per *media queries*{:@en} geziehlt Angaben für bestimmte Ausgabemedien gemacht. Bspw. ~~~CSS html { background: hsl(0, 0%, 20%); color: white; font: 1em/1.4 Georgia, serif; } @media (print) { html { background: white; color: black; font-size: 12pt; } } nav { background: black; } nav ul { display: flex; list-style: none; } @media (print) { nav { display: none; } } a { color: hsl(0, 100%, 70%); } a:focus, a:hover { color: hsl(0, 100%, 80%); } @media (print) { a { color: inherit; text-decoration: inherit; } a::after { content: ' (' attr(href) ')'; } } ~~~ LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Rolf B > Ob man medienspezifischen CSS Files macht, die über einen Media-Selektor im link-Element oder im @import-Statement aktiviert werden, hängt wohl von der Größe des medienspezifischen Teils ab. Ist er klein, würde ich eine CSS Datei mit @media print {...} und @media screen {...} Bereichen machen. Ansonsten würde ich link-Elemente mit media-Attribut verwenden, damit der Browser die CSS gleichzeitig laden kann. > > Liege ich damit richtig? Nein. Als **Nutzer** möchte man, dass Webseiten möglichst **schnell** laden. Wenn wir nicht über HTTP/2 sprechen heißt das: möglichst wenig HTTP-Requests. *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. Als **Entwickler** möchte man, dass Code möglichst **wartbar** ist. Dass eine Änderung nur an einer Stelle getätigt werden muss, nicht dieselbe Änderung an mehreren Stellen. Wenn das Druckstylesheet nicht gänzlich anders aussehen soll als das Bildschirmstylesheet (und das soll es nicht – gewisse Dinge wie grundlegendes Layout, Schriftart, Aussehen von Komponenten werden gleich sein), dann heißt das: *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. In dem *einen* Stylesheet werden dann per *media queries*{:@en} geziehlt Angaben für bestimmte Ausgabemedien gemacht. Bspw. ~~~CSS html { background: hsl(0, 0%, 20%); color: white; font: 1em/1.4 Georgia, serif; } @media (print) { html { background: white; color: black; font-size: 12pt; } } nav { background: black; } nav ul { display: flex; list-style: none; } @media (print) { nav { display: none; } } a { color: hsl(0, 100%, 70%); } a:focus, a:hover { color: hsl(0, 100%, 80%); } @media (print) { a { color: inherit; text-decoration: inherit; } a::after { content: ' (' attr(href) ')'; } } ~~~ LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)

@@Rolf B > Ob man medienspezifischen CSS Files macht, die über einen Media-Selektor im link-Element oder im @import-Statement aktiviert werden, hängt wohl von der Größe des medienspezifischen Teils ab. Ist er klein, würde ich eine CSS Datei mit @media print {...} und @media screen {...} Bereichen machen. Ansonsten würde ich link-Elemente mit media-Attribut verwenden, damit der Browser die CSS gleichzeitig laden kann. > > Liege ich damit richtig? Nein. Als **Nutzer** möchte man, dass Webseiten möglichst **schnell** laden. Wenn wir nicht über HTTP/2 sprechen heißt das: möglichst wenig HTTP-Requests. *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. Als **Entwickler** möchte man, dass Code möglichst **wartbar** ist. Dass eine Änderung nur an einer Stelle getätigt werden muss, nicht dieselbe Änderung an mehreren Stellen. Wenn das Druckstylesheet nicht gänzlich anders aussehen soll als das Bildschirmstylesheet (und das soll es nicht – gewisse Dinge wie grundlegendes Layout, Schriftart, Aussehen von Komponenten werden gleich sein), dann heißt das: *Ein* Stylesheet, nicht mehrere. *Ein* Stylesheet, nicht zwei. In dem *einen* Stylesheet werden dann per *media queries*{:@en} geziehlt Angaben für bestimmte Ausgabemedien gemacht. Bspw. ~~~CSS html { background: hsl(0, 0%, 20%); color: white; font: 1em/1.4 Georgia, serif; } a { color: hsl(0, 100%, 70%); } a:focus, a:hover { color: hsl(0, 100%, 80%); } @media (print) { html { background: white; color: black; font-size: 12pt; } nav { display: none; } a { color: inherit; text-decoration: inherit; } a::after { content: ' (' attr(href) ')'; } } ~~~ LLAP 🖖 -- “When UX doesn’t consider *all* users, shouldn’t it be known as ‘*Some* User Experience’ or... SUX? #a11y” —[Billy Gregory](https://twitter.com/thebillygregory/status/552466012713783297)