15 takeaways from cssconfeu 2015 that you can use today
You can use fill: currentColor as a property in your svg-icons. That way they’ll inherit the color property of their parent. Especially useful for inline-icons.
Blend modes could get really useful for making a consistent image-style across images for clients that don’t have much photography-experience. Much like an instagram-filter. You could for example do like this to get a more washed out dark color on an image.
For performance you can use a black/white image with a colored gradient with blend-mode on top to make a nice effect.
By always writing just 0 instead of 0px, 0em or similar, Facebooks saves a lot of energy (and I guess money). This is something a preprocessor should do, but a nice reminder non the less. Facebook also detects which browser you are browsing from and sends just the correct browser-prefix for each browser.
You can save yourself a lot of trouble by using background-images instead of the <img> tag in certain situations. The <img> tag is nice to have as a fallback, but hidden via CSS.
You can use max-width: max-content; to specify the size of a figure element where you want the width of the figure to be defined by image-width.
You can specify language in HTML with the lang-tag and target this with CSS to get quotes-marks for different languages.
Eks: <HTML lang="no">
@media: print has support for orphans and widows with the syntax orphans: 3; and widows:3;. It is sadly not supported in regular CSS, but I guess it will come. Would be especially handy if we could use this on layout-elements.
Flexbox can be used as a kind of element-query. You can use it to break up blocks when there isn’t enough space instead of @media-queries.
Margin(left|right|top|bottom): auto; is used a lot for calculating distances in flexbox.
Flex overwrites width and float, so they can be used as fallbacks.
To get an evenly distributed spacing between menu-elements add display: inline-block; to the li and display: flex; and justify-content: space-between; on the ul.
You should think of flexbox as an addition. First do as you normally would, then add the extra perfection in form of flexbox.
As a fallback for browsers that don’t support flexbox you can use modernizr or wrap you flexbox-code in this:
order is used to specify the order of the elements when they break to smaller sizes. Default is 0, but you could also use minus-values.