Articles by
Chris Coyier

Founder, writer, designer, spam-deleter, email personality

Styleable

The Wix dev team throws their hat into the CSS preprocessor ring:

Stylable is a CSS preprocessor that enables you to write reusable, highly-performant, styled components. Each component exposes a style API that maps its internal parts so you can reuse components across teams without sacrificing stylability.

  • Scopes styles to components so they don’t “leak” and clash with other styles.
  • Enables custom pseudo-classes and pseudo-elements that abstract the internal structure of a component. These can then be styled externally.
  • Uses themes so you can apply different look and feel across your web application.

At build time, the preprocessor converts the Stylable CSS into flat, static, valid, vanilla CSS that works cross-browser.

Looks like Sass luminary Chris Eppstein is getting in on the game of scoped styles with the not-yet-released CSS Blocks. And think of Vue's support for <style scoped>, and the popularity of utility libraries. I think scoped styles might be the hottest CSS topic in 2018.

Happier HTML5 Form Validation

HTML has given us loads of form validation stuff in the last few years. Dave Rupert puts a point on the UX problems with it:

If you’ve ever experimented with HTML5 Form Validation, you’ve probably been disappointed. The out-of-box experience isn’t quite what you want. Adding the required attribute to inputs works wonderfully. However the styling portion with input:invalid sorta sucks because empty inputs are trigger the :invalid state, even before the user has interacted with the page.

Fortunately, there is an invalid DOM event that does fire with useful timing: when the form is submitted. Remember this doesn't buy you super deep browser support though. If you need that, look into polyfilling. I imagine the future of form validation is either HTML/CSS offering better and more controllable UX, or this.

Live Share / Teletype

Amanda Silver introduces "Visual Studio Live Share", which:

enables developers using Visual Studio 2017 or Visual Studio Code to collaborate in real-time!

This goes a bit deeper than just a multiple-cursors thing. Both people get all the same fancy VS code UI stuff like IntelliSense and Peek.

GitHub's Atom editor also has Teletype, which:

lets developers share their workspace with team members and collaborate on code in real time.

Atom has the concept of a host, in which:

As the host moves between files, collaborators follow along with the active tab automatically.

I'd be remiss not to mention CodePen has Collab Mode and Professor Mode, which require zero setup. Shoot someone a URL and go!

SVG as a Placeholder

It wasn't long ago when Mikael Ainalem's Pen demonstrated how you might use SVG outlines in HTML then lazyload the image (later turned into a webpack loader by Emil Tholin). It's kind of like a skeleton screen, in that it gives the user a hint of what's coming. Or the blur up technique, which loads a very small image blurrily blown up as the placeholder image.

José M. Pérez documents those, plus some more basic options (nothing, an image placeholder, or a solid color), and best of all, a very clever new idea using Primitive (of which there is a mac app and JavaScript version), which creates overlapping SVG shapes to use as the placeholder image. Probably a bit bigger-in-size than some of the other techniques, but still much smaller than a high res JPG!

Aspect Ratios for Grid Items

We've covered Aspect Ratio Boxes before. It involves trickery with padding such that an element's width and height are in proportion to your liking. It's not an ultra-common need, since fixing an element's height is asking for trouble, but it comes up.

One way to lower the risk is The Psuedo Element Tactic, in which a pseudo element pushes its parent element to the aspect ratio, but if the content inside pushes it taller, it will get taller, aspect ratio be damned.

You can use that technique in CSS grid with grid items! Although there are a couple of different ways to apply it that are worth thinking about.

(more…)

Discover The Fatwigoo

When you use a bit of inline <svg> and you don't set height and width, but you do set a viewBox, that's a fitwigoo. I love the name.

The problem with fatwigoo's is that the <svg> will size itself like a block-level element, rendering enormously until the CSS comes in and (likely) has sizing rules to size it into place.

It's one of those things where if you develop with pretty fast internet, you might not ever see it. But if you're somewhere where the internet is slow or has high latency (or if you're Karl Dubost and literally block CSS), you'll probably see it all the time.

I was an offender before I learned how obnoxious this is. At first, it felt weird to size things in HTML rather than CSS. My solution now is generally to leave sensible defaults on inline SVG (probably icons) like height="20" width="20" and still do my actual sizing in CSS.

Text Input with Expanding Bottom Border

Petr Gazarov published a pretty rad little design pattern in his article Text input highlight, TripAdvisor style.

Typing animation in which a yellow border matches the length of the text inside.

It's a trick! You can't really make an <input /> stretch like that, so Petr makes a <span></span> to sync the value too, which acts as the border itself. The whole thing is a React component.

If you're willing to use a <span contenteditable></span> instead, you could do the whole thing in CSS!

(more…)

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag