12 Feb

Quick! What’s the Difference Between Flexbox and Grid?

Let's go rapid fire and try to answer this question with quick points rather than long explanations. There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They can stretch and shrink, they can center things, they can re-order things, they can align things... There are plenty of layout situations in which you could use either one … Read article

The post Quick! What’s the Difference Between Flexbox and Grid? appeared first on CSS-Tricks.

07 Feb

HTML, CSS and our vanishing industry entry points

Rachel Andrew:

There is something remarkable about the fact that, with everything we have created in the past 20 years or so, I can still take a complete beginner and teach them to build a simple webpage with HTML and CSS, in a day. We don’t need to talk about tools or frameworks, learn how to make a pull request or drag vast amounts of code onto our computer via npm to make that start. We just need a text

Read article

The post HTML, CSS and our vanishing industry entry points appeared first on CSS-Tricks.

01 Feb

How do you figure?

Scott O'Hara digs into the <figure> and <figcaption> elements. Gotta love a good ol' HTML deep dive.

I use these on just about every blog post here on CSS-Tricks, and as I've suspected, I've basically been doing it wrong forever. My original thinking was that a figcaption was just as good as the alt attribute. I generally use it to describe the image.

<figure> <img src="starry-night.jpg" alt=""> <figcaption>The Starry Night, a famous painting by Vincent van Gogh</figcaption>

I intentionally … Read article

The post How do you figure? appeared first on CSS-Tricks.

22 Jan

Netlify Makes Deployments a Cinch

(This is a sponsored post.)

Let's say you were going to design the easiest way to deploy a static site you can possibly imagine. If I was tasked with that, I'd say, well, it would deploy whenever I push to my master branch, and I'd tell it what command to run to build my site. Or maybe it has its own CLI where I can kick stuff out with as I choose. Or, you know what, maybe it's so … Read article

The post Netlify Makes Deployments a Cinch appeared first on CSS-Tricks.

11 Dec

What makes someone a good front-end developer?

We recently covered this exact same thing, but from the perspective of a bunch of developers.

Chris Ferdinandi weighs in:

The least important skills for a front-end developer to have are technical ones.

The nuances of JavaScript. How to use a particular library, framework, or build tool. How the cascade in CSS works. Semantic HTML. Fizz-buzz.

Chris takes that a little farther than I would. I do think that with an understanding of HTML, CSS, and JavaScript, the …

The post What makes someone a good front-end developer? appeared first on CSS-Tricks.

07 Dec

What do you name color variables?

What naming scheme do you use for color variables? Have you succeeded at writing CSS that uses color variables in a manner agnostic to the colors they represent?I've tried all of the following, and I have yet to succeed at writing CSS that works well with any color scheme. ☹️

— Lea Verou (@LeaVerou) October 14, 2018

I remember the very first time I tried Sass on a project. The first thing I wanted to do was variablize my …

The post What do you name color variables? appeared first on CSS-Tricks.

07 Dec

Accessible SVG Icons With Inline Sprites

This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here's the ideal example:

<button type="button"> Menu <svg class="svg-icon" role="img" height="10" width="10" viewBox="0 0 10 10" aria-hidden="true" focusable="false"> <path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"/> </svg> </button>


It's not the <svg> itself that is interactive — it's wrapped in a <button> for that. The .svg-icon class has some nice trickery, like em-based sizing to match the size of the text it's next to, and currentColor to match the color. Since

The post Accessible SVG Icons With Inline Sprites appeared first on CSS-Tricks.

06 Dec

Edge’s Announcements

The public-consumption blog post:

Ultimately, we want to make the web experience better for many different audiences. People using Microsoft Edge (and potentially other browsers) will experience improved compatibility with all web sites, while getting the best-possible battery life and hardware integration on all kinds of Windows devices. Web developers will have a less-fragmented web platform to test their sites against, ensuring that there are fewer problems and increased satisfaction for users of their sites; and because we’ll continue …

The post Edge’s Announcements appeared first on CSS-Tricks.

06 Dec

Browser Diversity Commentary, Regarding the Edge News

Still no word from the horse's mouth about the reported EdgeHTML demise, but I hear that's coming later today. The blog posts are starting to roll in about the possible impact of this though.

Andre Garzia: While we Blink, we loose the Web:

Even though Opera, Beaker and Brave are all doing very good work, it is still Chrome engine behind them and that limits the amount of stuff they can build and innovate. It is like as …

The post Browser Diversity Commentary, Regarding the Edge News appeared first on CSS-Tricks.

03 Dec

Too Much Accessibility

I like to blog little veins of thought as I see them. We recently linked to an article by Facundo Corradini calling out a tweet of ours where we used an <em> where we probably should have used an <i>.

Bruce Lawson checks if screen readers are the victims of these semantic mistakes...

Whenever I read “some browsers” or “some screenreaders”, I always ask “but which ones?”, as did Ilya Streltsyn, who asked me “what is the current state …

The post Too Much Accessibility appeared first on CSS-Tricks.