Cole Peters has written a great piece on his work refactoring the TrialReach CSS codebase:
…A functional approach to CSS has thus far played out really well for us at TrialReach — we’ve significantly reduced complexity and bloat in our
Jeremy Keith looks at the competing standards for the metadata that goes in the head which ultimately helps services such as Slack, Twitter and Facebook to create a preview of the content of a website. Unfortunately the lack of consensus …
This property gives developers the ability to set the font-size of an element depending on the size of its lowercase letters, rather than the uppercase letters.
.element {
font-size: 22px;
font-size-adjust: .5;
}In this case the lowercase letters of …
Nick Sherman gave a fascinating talk at Ampersand earlier this month which was based on an article he wrote called Variable Fonts for Responsive Design. In both the talk and the essay he suggests that we need a new …
Neat trick by Tobias Ahlin:
…How do you animate the
box-shadowproperty in CSS without causing re-paints on every frame, and heavily impacting the performance of your page? Short answer: you don’t. Animating a change ofbox-shadowwill hurt performance.
Several years ago the consensus on font loading in the community was that, as a website loads, all fonts should be hidden until the correct resources have been downloaded. Many designers and developers argued that the default font loading method …
The Network tab in Chrome DevTools has an option to faux throttle your network, so you can experience what your users might experience visiting your website on 3G, 2G and GPRS connections. Besides the obvious, it’s also useful for visualising …
Did you know that you can animate the content property of pseudo elements? According the list of animatable properties in the spec, you shouldn’t be able to, but in the latest version of desktop Chrome you can. The demo below …
Joe Richardson shared this little trick over on CodePen:
body {
/* operating system font */
font: caption;
}…
- If you’re on Ubuntu this will be the Ubuntu Font.
- If you’re on Yosemite this will be Helvetica.
- If you’re
Patrick Hamann in a fast-paced talk on avoiding single points of failure. He suggests:
Developers at …
CSSgram is a CSS library by Una Kravets recreating Instagram filters. The filters are pseudo elements on the <figure>, sitting on to of the <img>, using different gradients, opacities, and mix-blend-modes.
This continues her excellent work in experimenting …