Flexbox iOS Bei der Verwendung von Safari auf iOS wir der Inhalt eines als display: flex definierten Elements nicht angezeigt.1 Safari auf iOS zeigt ein Fehlverhalten bei der gleichzeitigen Verwendung eines Flexbox-Containers und gefloateten Elementen. In dieser Konstellation werden die gefloateten Elemente nicht angezeigt. Der Container nimmt aber trotzdem die benötigte Grösse ein. Lösung Float entfernen […]
Category: CSS
SASS(9)
CSS: floating
Bei als floated definierten Elementen kann es zu unschönen Umflüssen bei angelehnten Objekten kommen. Floated element Non floated element will wrap arround the floated element if there is more text than float height. .example-bad__left { float: left } .example-bad__right { padding-left: 5px } Wird dem angelehnten Objekt die Eigenschaft overflow: hidden angehängt lässt sich dieser […]
SVG: Basics
URI encoded SVG Bei der Verwendung von URI encoded SVG in CSS ist darauf zu achten dass nicht nur der Name des Kodierung sondern auch das Attribut charset verwendet wird. Andernfalls kann das Bild von Internet Explorer nicht interpretiert werden. /* This will not work in IE */ .my-style { background-color: url(“data:image/svg+xml;utf8,/* … */ “); […]
CSS/SASS: Listen
Mit CSS3 können Listen im Tabellen-Style definiert werden. Dadurch wir die Position von nummerierten Aufzählungszeichen und Inhalt dynamisch und die Aufzählungszeichen lassen sich einfach umsetzen. =============================== <li> | 1. | Description | =============================== </li> … =============================== <li> | 20. | Description | =============================== </li> :before ol { counter-reset: ordered-list; display: table; padding-left: 0; > li […]
CSS/SASS: Cross Browser
Platzhalter1 // Webkit ::-webkit-input-placeholder { color: #ff0000; opacity: 0.5; } // Firefox 4-18 :-moz-placeholder { color: #ff0000; opacity: 0.5; } // Firefox 19+ ::-moz-placeholder { color: #ff0000; opacity: 0.5; } // IE10+ :-ms-input-placeholder { color: #ff0000; opacity: 0.5; } http://blog.ajcw.com/2013/09/css-placeholder-cross-browser-support/ [↩]
CSS: Selectors
Input Text Elemente input[type=text], input[type=password], input[type=number], input[type=color], input[type=date], input[type=month], input[type=week], input[type=time], input[type=datetime], input[type=datetime-local], input[type=search], input[type=tel], input[type=url], input[type=email] { } Input Placeholder ::-webkit-input-placeholder { color: red; } :-moz-placeholder { /* Firefox 18- */ color: red; } ::-moz-placeholder { /* Firefox 19+ */ color: red; } :-ms-input-placeholder { color: red; }
CSS: Responsive
Horizontale und vertikale Bilder gleichmässig skalieren Es wird ein Container benötigt, in dem ein Pseudo-Objekt mit Padding-Top definiert wird um das Element gleich hoch wie breit zu drücken. Der Bildcontainer darin wird dann mit position: absolute an allen Kanten ausgerichtet. // HTML <div class=”responsive-container”> <div class=”img-container centerer”> <img src=”http://placehold.it/150×200″ alt=”” /> </div> </div> // […]
CSS: Code Dokumentation
Dieses Dokumentationsbeispiel richtet sich nach der Definition von CSSDOC1. /** * Website * * Style * * Style Description * * @project # Website # * @package layout * @author Patric Eberle <eberle@gyselroth.net> * @copyright Copyright (c) 2013, gyselroth GmbH * @css-for Firefox 14+, Chrome 21+, IE 8+, Safari 5+ * @license # http://www.gnu.org/copyleft/gpl.html GNU […]
Zentrieren
Bild in responsivem Layout zentrieren Mit dem folgenden Code kann ein Bild in einem relative positionierten Container vertikal und horizontal mittig ausgerichtet werden. <img width=”500″ height=”335″ title=”” alt=”” src=”img.jpg” /> img { max-height: 90%; max-width: 90%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; border: 2px solid rgb(44,44,44); } Bildgalerie […]
Relative Werte
Padding Das Padding in % für input-Elemente richtet sich nach der Grösse des Elternelements. Dies gilt auch für padding-top/-bottom. Height Die Höhe eins Objekts kann nur in Relation zur Höhe des Elternelements nicht aber zur eigenen oder der Breite des Elternelements gesetzt werden. Font Schriften können nur im Verhältnis zur Grunddefinition des Browsers (üblicherweise […]