TIL: Sass-Kommentare in komprimierten CSS-Dateien

Die Regel

Während eines Projektes macht man so einige Kommentare in seine Sass-Dateien um vielleicht ungewöhnlichen Code, der evtl. nur für eine Rückwärtskompatibilität (Hallo IE…) nötig ist, zu erläutern. Im Build-Prozess werden diese meist bei einer Komprimierung der finalen CSS-Datei entfernt (Sass-Parameter –style compressed), was durchaus auch gewollt ist um dem Website-Nutzer nur den Code übertragen zu müssen, der für die Darstellung der Website nötig ist.

Die Ausnahme

Manchmal ist es aber doch von Nöten, dass ein Kommentar in der finalen CSS-Datei erhalten bleiben muss. Heutzutage ist dies gerade oft bei Web-Fonts erforderlich, da der Kommentar über der @font-face Definition die Lizenz festlegt und nicht entfernt werden darf.

Die Lösung

Schreibt man in seiner Sass-Datei nun am Anfang statt des gewöhnlichen Block-Kommentars /* einfach /*! bleibt der gesamte Code-Block unkomprimiert erhalten, währnd der Rest der CSS-Datei von Kommentaren und unnötigen Leerzeichen befreit ist.

/*
Dieser Kommentar wird entfernt fuer die Ausgabe.
*/


/*!
Dieser Kommentar hingegen wird genau so in der CSS-Datei auftauchen.
*/

Accessibility: Kontrast-Verhältnis Text- zu Hintergrundfarbe

Auf ihrer Website hat die Frontend-Entwicklerin Lea Verou heute ein neues Tool von sich vorgestellt: Contrast Ratio mit dem es einfach möglich ist das Kontrast-Verhältnis gegen die WCAG 2.0 Richtlinien zu testen. Accessibility: Kontrast-Verhältnis Text- zu Hintergrundfarbe weiterlesen

Windows in VM und ungültige gültige Zertifikate

Neulich hat mich den halben Vormittag ein nerviges Problem beschäftigt. Ich arbeite an einem Mac und um Websites im IE zu testen habe ich eine virtuelle Maschine (VirtualBox) mit einer Windows-Installation in der ich den Internet Explorer nutze. Brauche ich die VM nicht friere ich den aktuellen Zustand ein. Neulich wollte der IE nun kein Cookie für einen Login speichern, weil er meinte, dass das SSL-Zertifikat der https-Verbindung abgelaufen bzw. nicht aktuell sei.

Windows in VM und ungültige gültige Zertifikate weiterlesen

Adobe Shadow – Vereinfachung für mobile Web-Development

Es gibt ein neues Tool von Adobe in den Adobe Labs, es nennt sich „Adobe Shadow“ und hilft beim entwickeln von mobilen Websites. Das ganze besteht aus einem Chrome-PlugIn für den Desktop und einer App fürs mobile Test-Gerät (Android und iOS).

Voraussetzung ist, dass sich beide Geräte im selben (WLAN-)Netz befinden. Entweder finden sie sich selbst oder man gibt in der App die IP des Rechners an, mit dem man gerade arbeiten möchte.

Adobe Shadow – Vereinfachung für mobile Web-Development weiterlesen