A blog about trying to make yourself better at making and designing websites. Also about random shit.

Weekend Reading: Secrets, Delays, and Design

πŸ”₯ CSS Secrets

I read the first part of CSS Secrets by Lea Verou and it is the shit. Lots of tips and ways to think about problems that you encounter in CSS. If you think you know how to do something, think again. Chances are, Lea will prove you wrong.

Here are some things that I learned in the first part of the book:

  • There exists a "native" Modernizr for CSS through @supports! Along with its JS counterpart window.CSS.supports, it can check for style support on the browser that it runs on. For example, you can create a test for CSS variables. In this example, the circle should look purple on Firefox or Chrome, but pink on other browsers like Edge (where CSS Variables isn't supported yet):

See the Pen CSS Variables by Jag Talon (@jagtalon) on CodePen.

  • Vendor prefixes were an epic failure. Vendor prefixes were meant to allow developers to test out new properties and give feedback to the WG. It turns out that people started using prefixes in production which meant that getting stuck with the half-baked spec. For example, Firefox and Edge implemented -webkit properties for compatibility.

  • The first variable in CSS is currentColor.

  • Use inherit to avoid repetition. For example, to give form elements the same font as the rest of the page: input, select, button { font: inherit; }

  • On CSS property shorthands: "Don’t be afraid of shorthands. It is good defensive coding and future-proofing to use them, unless we intentionally want to use cascaded properties for everything else."

  • On preprocessors: "My advice would be to start off every project with pure CSS, and when it starts being impossible to keep it DRY, switch to using a preprocessor then."

πŸ”₯ CSS Keyframe Animation with Delay Between Iterations

When I first started learning CSS Animations, I thought that animation-delay would set a delay between each iteration. But, alas, it only adds a delay before the animation starts.

If you're running into the same problem, check out this article from CSS-Tricks which teaches you to fake it! Here are other resources:

πŸ”₯ CSS is for Developers

This is another good one from Lea Verou. You do not have to be a designer to write CSS! "The skills required to write good CSS code are by and large the same skills required to write good code in general. CSS code also needs to be DRY, maintainable, flexible etc."

Pair that with some Advice to budding front-end developers to end the evening.