css
nog lezen: https://www.mozilla.org/en-US/developer/css-grid/
nth-child
iframe:nth-child(1) { border: 5px solid yellow; }
iframe:nth-child(2) { border: 5px solid black; }
...
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 t
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
- http://foundation.zurb.com/index.html
- [[http://foundation.zurb.com/learn/video-started-with-foundation.html|video]]
Goed boek
(tip van Peter): http://www.cssmastery.com/
Center
- http://bluerobot.com/web/css/center1.html
- http://css-discuss.incutio.com/wiki/Centering_Block_Element
- http://dorward.me.uk/www/centre/
attribute selectors
- http://css-tricks.com/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;
}
[[http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html|source]]