Making Sadie theme – experimental features

Red Panda tries to mix to chemicals in glass containers

Recently I remade my current theme with few adjustments. It’s not done and it probably never will be done because I can tweak it.

Technical features

CSS Grids

At the beginning I knew that my next personal website will use them mostly because wider support started to appear a year ago and I’ve had enough of float and flexbox layouts which aren’t made for two dimensions. This comes mostly after fighting with bootstrap and 12 column systems.

Also CSS Grids are supported at the moment by 72% (Global) to 85% (Estonia) of browsers, depending on where you live. And without Grid support the website doesn’t break that much.

Can I use - CSS Grid

Custom properties in CSS

Custom properties are on the similar level of support as CSS Grids.

Can I use - Custom properties

The reason why I wanted to use variables in CSS is simple, I craved them for so long that when I saw the support I just had to do it and I’ve got used to working with variables on projects where we used Sass and it’s quite easy to get used to them.

Note: One problem which I encountered while I was debugging the design were missing underlines in Safari. At first I thought that it’s because there’s a custom property in  text-decoration: underline var(--orange); . Unfortunately Safari still has  text-decoration’s properties prefixed. So to make them work I had to write in my CSS file:

@import

In Sass and Less I’ve always imported couple of stylesheets into one master stylesheet. Since there’s no Sass file in my src folder I had to figure out how to do it differently. Fortunately most browsers support @import at-rule already.

Technical unknowns

HTTP/2

HTTP/2 is currently somewhat unknown and unfortunately I will make some mistakes when it comes to optimizing for performance initially. As an example I could mention multiple CSS files, if I were using HTTP version 1, that’s no doubt a problem for speed because HTTP1 makes for every file a new request. HTTP2 uses a stream and can download several files in parallel. Does it make sense to concatenate all CSS and JS files? Honestly I can’t tell yet.

Fortunately HTTP2 is supported by the vast majority of browsers so I can start gathering data.Can I use - HTTP2

Conclusion

I may have chosen to abandon IE11 six months too early, and to a certain degree Edge 15 as well, but that’s a decision with which I can live at the moment. For the next project I’ll set minimum requirements for the browser support or someone else will. HTTP2 is new and to a certain degree unknown area when it comes optimization for performance but with Gutenberg on the horizon I’ll wait if I am sticking with WordPress after 5.0 release, more in resources about that, before I go deep into WordPress optimization.

Resources