DragonI

Supported in WebKit Nightly with -webkit-prefix.

1. Enabled in Chrome through the "experimental Web Platform features" flag in chrome://flags
2. Partial support in IE refers to supporting an older version of the specification.
3. There are some bugs with overflow (1356820, 1348857, 1350925)

CSS Grid is revolutionizing web design. It’s a flexible, simple design standardthat can be used across all browsers and devices. Designers and developers are rapidly falling in love with it and so are we. That’s why we’ve been working hard on the Firefox Developer Tools Layout panel, adding powerful upgrades to the CSS Grid Inspector and Box Model. The latest improvements are now available in Firefox Nightly.

Dart Sass fully sass-spec compatible1.

Next Steps: Ruby Sass

There are a number of intentional behavior differences between Dart Sass and the existing implementations. All of these differences are things we think improve the language, and many of them have also made Dart Sass much easier to implement, but we recognize that they can make migration more difficult. That's why our next priority is updating Ruby Sass by deprecating old behavior or adding new behavior, as necessary.

Our long-term compatibility goal is to ensure, as much as possible, that if a stylesheet compiles without warnings on Ruby Sass, it will also work with Dart Sass. So a substantial portion of our effort in the near future be spent on ensuring all the compatibility issues are fixed. Once that's done, we'll release those changes as part of Ruby Sass 3.5.

Next Steps: Dart Sass

On the Dart front, we have a number of issues outstanding that we want to resolve before we release a stable version of 1.0.0. The majority of these issues are focused on one thing: compatibility with the node-sass render() API. This will make it easy to integrate Dart Sass into existing JS ecosystem tools and workflows, since anything that works with node-sass will automatically work with Dart Sass as well.

Grid Garden

A game for learning CSS grid layout

cssgridgarden.com

Welcome to Grid Garden, where you write CSS code to grow your carrot garden! Water only the areas that have carrots by using the grid-column-start property.

For example, grid-column-start: 3; will water the area starting at the 3rd vertical grid line, which is another way of saying the 3rd vertical border from the left in the grid.

• live demos
• code snippets
• definitions from the W3C Flexbox specification

CSS Writing Modes

Jen Simmons points us in the direction of a useful but less well known CSS feature that becomes increasingly important when designing page layouts for a global audience. Like the wise men following the Star of Bethlehem, sometimes the best direction is given to us, not chosen.

24ways.org

Why learn about writing modes?

There are three reasons I’m teaching writing modes to everyone—including western audiences—and explaining the whole system, instead of quickly showing you a simple trick.

1. Most importantly, I’ve found understanding Writing Modes incredibly helpful when understanding Flexbox and CSS Grid. Before I learned Writing Mode, I felt like there was still a big hole in my knowledge, something I just didn’t get about why Grid and Flexbox work the way they do. Once I wrapped my head around Writing Modes, Grid and Flexbox got a lot easier. Suddenly the Alignment properties, align-* and justify-*, made sense.

We live in a big, diverse world, and learning about other languages is fascinating. Many of you lay out pages in languages like Chinese, Japanese and Korean. Or you might be inspired to in the future.

2. Using writing-mode to turn bits sideways is cool. This CSS can be used in all kinds of creative ways, even if you are working only in English.

CSS properties

I’m going to focus on the CSS writing-mode property in this article. It has five possible options:

writing-mode: horizontal-tb; writing-mode: vertical-rl;   writing-mode: vertical-lr;   writing-mode: sideways-rl;   writing-mode: sideways-lr;

9 Underutilized Features in CSS

CSS has been around for a long time — since 1994 depending on who you ask — and has become the de facto standard for styling websites. New…

medium.com|Jordan Little

W3C(2) • CanIuse

The :valid and :invalid pseudo classes are used to style validated form inputs. Most new input types have the ability to be “valid” and “invalid” based on their type. For example, an input of type “email” with an invalid email address will trigger the :invalid pseudo class — all natively in the browser.

input:valid { color: green; } input:invalid { color: red; }

The :empty pseudo class is applied to elements with no content. So instead of wrapping <h1>{name}</h1> with conditional logic in the template, you could simply leave it as is and hide it if there’s no value.

h1:empty { display: none; }

W3C • CanIuse

Nth-child selectors are great for removing the border from the last element in a list or striping rows in a table, but that is only the tip of the iceberg for this very useful selector function.

Using some basic algebra, you can grab “every fourth element, starting with the first.”

.book:nth-child(4n+1) { color: red; }

or “every third element, starting with the second.”

.book:nth-child(3n-1) { color: blue; }

In CSS: use pixels, not em

Precision over elegance

jgthms.com

Why you should use px, not em

Using em is a very elegant way to define both your text size and your layout. It keeps every element balanced and easily sizable. I’veused it before. It’s a pain.

Fonts need precision to look sharp

Let’s say your default font-size is set to 16px. You have titles at 2remand subtitles at 1.5rem. Fabulous! Your semantic hierarchy matches your visual one. If you were to change your default text size to 15px, you’d maintain that hierarchy.

But not all font sizes are equal… Considering the text of this website:

Every font needs its own specific size

Another problem with em arises when you want to change the font family, because every font renders differently at each size:

Just use pixels

If you want sharp precise interfaces, stick to px:

• you’ll avoid any cumbersome calculations that involve 4 decimals
• just by looking at a CSS rule, you’ll know exactly how it will look like because there’s no dependency
• preprocessors like Sass allow easy maintenance anyway: you can have global variables for sizes, or use mixins to define variations for your elements
• you’ll be able to align different types of elements that each require their own font-size

This repository is a community-curated list of flexbox issues and cross-browser workarounds for them. The goal is that if you're building a website using flexbox and something isn't working as you'd expect, you can find the solution here.

As the spec continues to evolve and vendors nail down their implementations, this repo will be updated with newly discovered issues and remove old issues as they're fixed or become obsolete. If you discover a bug that's not listed here, please report it so everyone else can benefit.

1. Minimum content sizing of flex items not honored
2. Column flex items set to align-items:center overflow their container
3. min-height on a flex container won't apply to its flex items
4. flex shorthand declarations with unitless flex-basis values are ignored
5. Column flex items don't always preserve intrinsic aspect ratios
6. The default flex value has changed
7. flex-basis doesn't account for box-sizing:border-box
8. flex-basis doesn't support calc()
9. Some HTML elements can't be flex containers
10. align-items: baseline doesn't work with nested flex containers
11. Min and max size declarations are ignored when wrapping flex items
12. Inline elements are not treated as flex-items
13. Importance is ignored on flex-basis when using flex shorthand
14. Flex containers with wrapping the container is not sized to contain its items

In this post I’ll share some stories and lessons on accessibility from my experience building a mobile-friendly data table. I left with four takeaways from this project that we’ll apply to future projects:

1. Don’t become overly attached to your prototypes
2. Don’t underestimate the effect of CSS on screen readers
3. Sweat the small stuff
4. Stick to semantic HTML

Prototypes are really helpful in pushing a project forward, but they should really be no more than a proof of concept. You should always be ready to throw them away in favour of a more semantic, accessible approach.