Erklärung Unter Intrinsic Web Design versteht man einen technologischen Ansatz bei der Gestaltung von flexiblen Benutzeroberflächen (meist Websites). Intrinsic Web Design ist eine Weiterführung des klassischen Responsive Web Design (RWD) mit dem Unterschied, dass händisch u.a. keine Breakpoints festgelegt werden müssen. Das Layout gestaltet sich in gewisser Weise selbst im Browser, ohne dass im Vorfeld jede […]
Mehr erfahren
Erklärung BEMIT CSS ist die Kombination aus der Benennungskonvention BEM und dem Organisationssystem ITCSS. Kernziel von Benennungskonvention und Organisationssystem ist es, eine möglichst skalierbare und gut zu pflegende CSS-Architektur zu erstellen. BEM zeigt den Entwicklern, wie die CSS Klassen in Relation zueinander stehen. Dies ist besonders bei komplexen DOM-Strukturen nützlich und wird perfekt von ITCSS ergänzt. […]
Mehr erfahren
Erklärung »CSS-in-JS« ist ein Ansatz, um mit den komplexen Herausforderungen, wie Pflege, Scoping und Strukturierung von CSS umzugehen, wenn ein modularer Entwicklungsansatz verfolgt wird. Voraussetzung ist, dass die Module via JavaScript implementiert werden. Dabei wird das CSS für ein bestimmtes Modul nicht in einer separaten CSS Datei gepflegt, sondern direkt im JavaScript. Ein notwendiger Kompilierungsprozess […]
Mehr erfahren
Erklärung ITCSS steht für »Inverted Triangle CSS« und ist ein Organisationssystem, um eine möglichst skalierbare und gut zu pflegende CSS-Architektur zu erstellen. Das Schlüsselprinzip von ITCSS besteht darin, den CSS-Code in einzelnen Kategorien aufzugliedern. Diese werden als »Layer« bezeichnet. ITCSS ist mit CSS-Methodiken wie BEM, SMACSS or OOCSS kompatibel. Die CSS Layer werden von generischen […]
Mehr erfahren
Erklärung Ein »Prolyfill« (seltener auch »Forward Polyfill« oder »Speculative Polyfill«) ist eine Variante eines Polyfills. Der Unterschied besteht darin, dass ein Browser nicht um eine Funktion erweitert wird, die bereits von anderen Browsern oder einem Teil der Spezifikation implementiert wurde, sondern, dass eine gänzlich neue Funktion ermöglicht wird, die wahrscheinlich in Zukunft implementiert wird. Durch den […]
Mehr erfahren
Erklärung Mit mit des »Faux Columns«-Tricks werden zwei nebeneinander gefloatete Elemente mit unterschiedlicher Höhe optisch auf die gleiche Höhe gebracht. Hierfür wird der umschließende Container dieser Elemente mit einem zweispaltigen Hintergrundbild gefüllt. Diese Methode ist durch aktuelle Webtechnologien weitestgehend überflüssig geworden.
Mehr erfahren
Erklärung WET CSS steht für »We Enjoy Typing« oder auch »Write Everything Twice« und beschreibt das Gegenteil des CSS-Architekturkonzepts DRY. WET CSS ist eher als Spaß zu verstehen, da das DRY-Konzept immer erstrebenswert ist und das WET-Konzept somit nicht wirklich als Konzept bezeichnet werden kann.
Mehr erfahren
Erklärung Unter einem Postprozessor versteht man ein Computerprogramm, das bestehende Daten um zusätzlichen Angaben erweitert oder bestehenden Code verändert. Ein gutes Beispiel für einen Postprozessor ist der Autoprefixer für CSS-Dateien. Hier wird eine bestehende CSS-Datei mit Hilfe des Autoprefixers um benötigte Vendor-Präfixe ergänzt. Auch PostCSS unterstützt zahlreiche Plugins für Post-Prozessing-Funktionalität – wie der Name bereits vermuten lässt.
Mehr erfahren
Erklärung Unter einem Präprozessor versteht man ein Computerprogramm, das eingegebene Daten vorbereitet und zur Weiterverarbeitung an ein anderes Programm übergibt. Es existieren unter anderem Präprozessoren für CSS, HTML und JavaScript. Ein Ziel von Präprozessoren ist es, den Funktionsumfang, die Schreibweise und die Lesbarkeit des eingegebenen Codes zu verbessern. Ein populärer Präprozessor für CSS ist Sass.
Mehr erfahren
Erklärung LESS ist ein Präprozessor für die Stylesheet-Sprache CSS. Das Ziel von Less ist es, CSS effizienter zu gestalten und Code-Wiederholungen zu vermeiden. In Less kann unter anderem mit Variablen, Mixins, Berechnungen und Funktionen gearbeitet werden. Beispiel: @color: red; .rounded (@radius: 4px;) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } header { color: @color; .btn { […]
Mehr erfahren