Posts in Category: css tricks


CSS Grid Areas

I think of named grid areas in CSS Grids as bring-your-own syntactic sugar. You don’t absolutely need them (you could express grid placement in other ways), but it can make that placement more intuitive. And, hey, if I’m wrong about that, correct me in the comments.

 

Say you set up a

Read More








Getting Started with Vue Plugins

In the last months, I’ve learned a lot about Vue. From building SEO-friendly SPAs to crafting killer blogs or playing with transitions and animations, I’ve experimented with the framework thoroughly.

But there’s been a missing piece throughout my learning: plugins.

Most folks working with Vue have either comes to rely on plugins

Read More


HTML for Zip Codes

It seems like zip codes are just numbers, right? So…

<input id="zip" name="zip" type="number">

The advantage there being able to take advantage of free validation from the browser, and triggering a more helpful number-based keyboard on mobile devices.

But Zach pointed out that type="number" is problematic for zip codes because zip codes

Read More




The Way We Talk About CSS

There’s a ton of very quotable stuff from Rachel Andrew’s latest post all about CSS and how we talk about it in the community:

CSS has been seen as this fragile language that we stumble around, trying things out and seeing what works. In particular for layout, rather than using the

Read More



Valid CSS Content

There is a content property in CSS that’s made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element.

Here’s an example:

<div 
  data-done="✅"
  class="email">
    chriscoyier@gmail.com
</div>
.email::before {
content: attr(data-done) " Email: "; /* This gets inserted

Read More