Latest News

The way JavaScript works is we can do scripts as an inline block:


let foo = "bar";


Or, if the script should be fetched from the network…

/js/global.js

With CSS, we can do an inline block of styles:

<style>
.foo { color: red; }
</style>

So why not <style src=""></style>? Instead, we have <link href="">.

Harry Roberts asked about that the other day on Twitter:

Can any W3 historians tell us why it’s `<link rel=”stylesheet” …

The post Why isn’t it <style src=””>? appeared first on CSS-Tricks.

If you’ve been writing JavaScript for some time now, it’s almost certain you’ve written some scripts dealing with the Document Object Model (DOM). DOM scripting takes advantage of the fact that a web page opens up a set of APIs (or interfaces) so you can manipulate and otherwise deal with elements on a page.

But there’s another object model you might want to become more familiar with: The CSS Object Model (CSSOM). Likely you’ve already used it but didn’t necessarily …

The post An Introduction and Guide to the CSS Object Model (CSSOM) appeared first on CSS-Tricks.

I think it’s kinda cool to see Google dropping repos of interesting web components. It demonstrates the possibilities of cool new web features and allows them to ship them in a way that’s compatible with entirely web standards.

Here’s one: <two-up>

I wanted to give it a try, so I linked up their example two-up-min.js script in a Pen and used the element by itself to see how it works. They expose the component’s styling with custom properties, which I’d …

The post Google Labs Web Components appeared first on CSS-Tricks.

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.

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>

Notes:

• 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.