Chronicle posts are opportunities for me to round-up things that I haven't gotten a chance to post about yet, rounded up together. It's stuff like podcasts I've had the good fortune of being on, conferences I've been at or are going to be at, happenings at ShopTalk and CodePen, and more.… Read article
SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear.
I know we didn't cover why yet, but I hope that will become clear as we dig into it.… Read article
You know how you can style (to some degree) selected text with ::selection? Well, Jeff Starr uncovered a heck of a weird CSS bug.
If you:
<style></style> block)Selecting text will have no style at all. 😳😬😕… Read article
You know the single-value syntax: .thing { display: block; }. The value "block" being a single value. There are lots of single values for display. For example, inline-flex, which is like flex in that it becomse a flex container, but behaves like an inline-level element rather than a block-level element. Somewhat intuitive, but much better served by a two-value system that can apply that same concept more broadly and just as intuitively.… Read article
David Chanin has a quickie article summarizing a problem with setting an element's height to 100vh in mobile browsers and then also positioning something on the bottom of that. … Read article
I wanted to make sure you understand exactly what Percy can do for you, hence the title. When you commit a change to your websites Git repo, like in a Pull Request workflow most of us live in, Percy will let you know if that change causes any visual changes to your site. It will show you exactly what those changes are: what pages, what media query breakpoint, what browser, etc.
It's rather amazing.… Read article
I like the term "Git-backed CMS." That term works for an emerging style of CMS that looks and behaves much like any other CMS, with a fascinating twist: it doesn't actually store any data for you. These CMSs are connected to a Git repo where the data lives in flat files (e.g. Markdown). You teach the CMS where those files are and how they are structured. Then, as you use the CMS to create, edit, and delete … Read article
I think the :placeholder-shown selector is tremendously cool. It allows you to select the placeholder of an input (<input placeholder="..."/>) when that placeholder is present. Meaning, the input does not yet have any value. You might think input[value] could do that, or help match on the actual value, but it can't.
This makes :placeholder-shown one of the few CSS properties that we have that can react to user-initiated state joining the likes of :hover-and-friends, :checked (checkbox … Read article
Say you want to have an image (or any other element) visually float left into a paragraph of text. But like... in the middle of the paragraph, not right at the top. It's doable, but it's certainly in the realm of CSS trickery!… Read article