Kleines (S)CSS Helferlein
Es gibt ja eine Menge Tools, die einem beim Web-Dev-Alltag unterstützen. Aber oft übersteigt die Einrichtung oder Anpassung dieser Tools zeitlich das eigentliche Vorhaben.
Mir ist grad aber ein kleines Helferlein wieder unter die Finger gekommen, dass wirklich praktisch ist und sich nahtlos in jedes Webprojekt einbinden lässt, keine Performance frisst und dass sich auch gefahr- und spurlos wieder aus dem Projekt entfernen lässt.
Bei der Erstellung von Responsive-Websites braucht man doch recht häufig den Hinweis, in welcher Responsivstufe (Breakpoint) man sich denn gerade befindet. Und genau hier kommt das Helferlein zum Einsatz.
Die Idee ist, dass man lediglich ein biss CSS mit in die Website rendert und somit sehen kann, was Sache ist. Der Vorteil gegenüber den Chrome-Developer-Tools zum Beispiel ist, dass das Helferlein natürlich auch auf Tablets, Phones, TVs oder wo auch immer zu sehen ist.
Gesagt, getan
Ich zeige es hier mal am Beispiel von SCSS - aber das funktioniert natürlich auch ohne CSS-Pre-Processor. Der SCSS Code lässt sich ja noch leicht umschreiben.
Breakpoints
Aus Gründen der Übersichtlichkeit und besseren Wartbarkeit sollte man die Werte für die Breakpoints immer als Variable abspeichern - damit hat man's dann auch leichter, wenn sich die Werte mal ändern sollten.
/* VARS */
$breakpoint-phone: 480px; // phone
$breakpoint-tablet: 768px; // tablet
$breakpoint-desktop: 1024px; // desktop
$breakpoint-largedesktop: 1200px; // large desktop
$breakpoint-verylargedesktop: 1280px; // very large desktop
Als nächstes malen wir unsere DIV, dass wir bei den entsprechenden Breakpoints anzeigen lassen wollen. Es wird mit dem CSS Pseudo Attribut before einfach vor den Body gehängt - stört also garantiert nicht unsere eigentliche Website.
/* DEBUG */
body:before {
position: fixed;
z-index: 10000000;
right: 0;
bottom: 0;
background: #000000;
color: #00ff00;
border: 1px solid #00ff00;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 10px;
padding: 2px 6px;
pointer-events: none;
content: 'infinit';
}
Jetzt müssen wir nur noch dafür sorgen, dass bei den entsprechenden Breakpoints auch der richtige Inhalt eingefügt wird. Das machen wir, indem wir das content-Attribute mit unterschiedlichen Inhalten befüllen - je nach Breakpoint halt.
/* BREAKPOINTS */
@media (max-width: $breakpoint-verylargedesktop) { body:before { content: 'very large desktop'; } }
@media (max-width: $breakpoint-largedesktop) { body:before { content: 'large desktop'; } }
@media (max-width: $breakpoint-layout) { body:before { content: 'layout'; } }
@media (max-width: $breakpoint-desktop) { body:before { content: 'desktop'; } }
@media (max-width: $breakpoint-tablet-landscape) { body:before { content: 'tablet landscape'; } }
@media (max-width: $breakpoint-tablet-portrait) { body:before { content: 'tablet portrait'; } }
@media (max-width: $breakpoint-phone) { body:before { content: 'phone'; } }
Das war's auch schon. Fertig ist unser kleines Breakpoint-Anzeige-Helferlein. Man kann das jetzt noch weitertreiben, indem man beim Deployprozess unterschiedliche Regeln festlegt und somit dafür sorgt, dass das Helferlein auch wirklich nur auf dem Entwicklungsserver zu sehen ist - aber das ist ne andere Baustelle.
