User Tools

Site Tools


Sidebar



css

CSS

width/height of viewport
img {
  width: 50vw;
  height: 50vh;
  /*object-fit: cover; */
}
web

see web

css tricks
flexbox
use css3 features if supported
var css3_support = (document.createElement("detect").style.objectFit === ""); //'objectFit' or other css3 tag
document.getElementsByTagName("html")[0].className += (css3_support ? " css3" : " nocss3");
.css3 img { 
  /* css3 support */
}
.nocss3 img {
  /* no css3 support */
}
img {
  /* always */
}
css names in javascript

“background-color” becomes “backgroundColor”, and “list-style-type” becomes “listStyleType”

detect css3
initial
h1 {
  color: initial; 
}
Foundation
Goed boek

(tip van Peter): http://www.cssmastery.com/

Center
attribute selectors
td[bgcolor="#00ffff"] {
	border:5px solid green;
}
input type text
input[type="text"] 
multiple columns
.template-front-page .intro {
	-moz-column-count:2; /* Firefox */
	-webkit-column-count:2; /* Safari and Chrome */
	column-count:2;
	-moz-column-gap:40px; /* Firefox */
	-webkit-column-gap:40px; /* Safari and Chrome */
	column-gap:40px;
	text-align: justify;
}
position:relative
style only children not descendants
li.page_item.current_page_item > a {
}
center div's vertically
.className{
	position:absolute;
	left:50%;
	top:50%;
	width:400px;
	height:300px;
	margin-top:-150px;
	margin-left:-200px;
}

source

css.txt · Last modified: 2017/05/03 12:29 by rick