Adactio: Links

The Story of CSS Grid, from Its Creators · An A List Apart Article

It must be the day for documenting the history of CSS. Here’s an article by Aaron on the extraordinary success story of CSS Grid. A lot of the credit for that quite rightly goes to Rachel and Jen:

Starting with Rachel Andrew coming in and creating a ton of demos and excitement around CSS Grid with Grid by Example and starting to really champion it and show it to web developers and what it was capable of and the problems that it solves.

Then, a little bit later, Jen Simmons created something called Labs where she put a lot of demos that she created for CSS Grid up on the web and, again, continued that momentum and that wave of enthusiasm for CSS Grid with web developers in the community.

Building a CSS-only image gallery (with fallbacks)

A great step-by-step walkthrough of building a really nice image gallery without any JavaScript.

The end result is really impressive but there’s still the drawback that the browser history will be updated every time you click on an image thumbnail (because the functionality relies on ID attributes referenced via :target). Depending on your use-case, that may or may not be desirable.

A Look Back at the History of CSS | CSS-Tricks

The evolution of CSS, as told by the author of the excellent History of the Web newsletter.

CSS Grid PlayGround | Mozilla

A ten-part tutorial on CSS Grid from Mozilla.

eBay’s Font Loading Strategy | eBay Tech Blog

Here’s the flow that eBay use for the font-loading. They’ve decided that on the very first page view, seeing a system font is an acceptable trade-off. I think that makes sense for their situation.

Interestingly, they set a flag for subsequent visits using localStorage rather than a cookie. I wonder why that is? For me, the ability to read cookies on the server as well as the client make them quite handy for situations like this.

CSS and SVG animation workshop by codebarbrighton

There were two days of Codebar workshopping on the weekend as part of the Brighton Digital Festival. Cassie talked people through this terrific CSS animation tutorial, making this nifty Brighton-based piece.

CSS Grid Gotchas And Stumbling Blocks – Smashing Magazine

A great practical article from Rachel answering some frequently asked questions about—what else?—CSS Grid.

Why Use Grid Instead Of Flexbox?

Should Grid Be Used For Main Layout And Flexbox For Components?

Can Grid Track Sizing Be Dictated By Content?

Can I Do A Masonry Layout With Grid?

How Do I Add Backgrounds And Borders To Grid Areas?

Can I Nest Grids?

Can I Polyfill Grid Layout?

5 things CSS developers wish they knew before they started | CSS-Tricks

Don’t underestimate CSS
Share and participate
Pick the right tools
Get to know the browser
Learn to write maintainable CSS

cassidoo/HTML-CSS-Tutorial: Tutorial for HTML and CSS

Here’s a great free curriculum for teaching HTML and CSS.

[selectors] Functional pseudo-class like :matches() with 0 specificity · Issue #1170 · w3c/csswg-drafts

A really interesting proposal from Lea that would allow CSS authors to make full use of selectors but without increasing specificity. Great thoughts in the comments too.

Designing Websites for iPhone X | WebKit

This could be a one-word article: don’t.

More specifically, don’t design websites for any specific device. That way lies pain (and it is not the way of the web).

But read on for a textbook example of how not to introduce new CSS properties. Apple proposed the new syntax that they’re shipping. Now it’s getting standardised …with a different name. So basically Apple are shipping the equivalent of a vendor-prefixed property without the vendor prefix.

Understanding the WebView Viewport in iOS 11 - Ayogo Health Inc.

One more reason not to use sticky headers on mobile.

Talking about talking CSS

I had the great pleasure of finally meeting Hui Jing when Mozilla invited me along to Singapore to speak at their developer roadshow. Hui Jing is speaking at each one of the events on the roadshow, and documenting the journey here.

She’s being very modest about her talk: it was superb! Entertaining and informative in equal measure, delivered with gusto. Seriously, frontend conference organisers, try to get Hui Jing to speak about CSS at your event—you won’t regret it.

Removing the White Bars in Safari on iPhone X

You could add a bunch of proprietary CSS that Apple just pulled out of their ass.

Or you could make sure to set a background colour on your body element.

I recommend the latter. Because reasons.

Web truths: CSS is not real programming | Christian Heilmann

A lot of “CSS is not real programming” arguments are a basic misunderstanding what CSS is there to achieve. If you want full control over and interface and strive for pixel perfection – don’t use it. If you want to build an interface for an inclusive and diverse web, CSS is a great tool.

Christian does a good job of describing the much-misunderstood declarative nature of CSS.

Also:

In any case, belittling people who write CSS and considering them not real developers is arrogant nonsense.

Basic grid layout with fallbacks using feature queries

A really nice example of progressive enhancement: creating a layout with inline-block, then flexbox, then Grid.

Is there any value in people who cannot write JavaScript?

When every new website on the internet has perfect, semantic, accessible HTML and exceptionally executed, accessible CSS that works on every device and browser, then you can tell me that these languages are not valuable on their own. Until then we need to stop devaluing CSS and HTML.

I couldn’t agree more.

Tags: css

662