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.
  .div-over-img {
  background-color: #2f3138;
  background-blend-mode: lighten;
  }
  • 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">
  HTML[lang="no"] q {
  Quotes: '«' '»';
  }
  • @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:
  @supports(flex-wrap:wrap){
  // instead of modernizr
  }
  • 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.

Last Posts