Tags

Publishing pixel art on the web? Don’t let it get blurred and smushed.

Apply image-rendering: crisp-edges to the image with CSS. Alternatively, export your pixel art at a higher resolution, so each visual pixel is made of many pixels, minimising impact from scaling and compression.

Remember to also use a good file format. Formats like JPEG are optimised for photos, not pixel art, and can introduce artefacts. PNG and GIF are good choices.

CSS Naked Day MISUNDERSTOOD (gone wrong) (just got out of GAOL!!??!) 😵🤯👮‍♂️

I’ve seen people killed for lesser crimes than writing the CSS I just wrote.

Solemnly staring at my computer screen in silence, trying to regain my composure after realising I’ve just been editing the SASS output, not the source files.

I don’t know why, but z-index always has to be the last declaration in a CSS rule. Anywhere else just feels wrong.

My driver evidently isn’t a logical properties guy as he gave me a weird look when I told him to turn inline-start at the lights.

One of the most horrific codebases I’ve ever seen is one in which all the styling was done using Tailwind’s @apply. No utility classes in markup, just CSS files full of selectors and @apply. They had inexplicably reinvented CSS in Tailwind, and it struck fear into my very heart.

Anyone had any luck getting past the final boss in CSS Backgrounds Module Level 4? I can never seem to dodge that final attack. I’ve been stuck on the level for months.

Are you a 500ms or 0.5s sort of person?

Knocking off for the day after adding some ‘pop’ with body {filter: saturate(10); } and making the app ‘more dynamic and interactive’ by slapping * { transition: all 0.25s ease-in-out; } into the stylesheet.

Every now and then someone says something to the effect of ‘We have this new modern CSS thing. We don’t need to set the z-index to 99999 anymore!’.

I wish to make myself clear. I set my z-indexes to 99999 as a matter of principle, not necessity. You can pry z-index: 99999 from my corpse.

Everyone says OKLCH like ‘Okay El Sea Haich’, yeah?

Just updated my dev rig. Pretty sweet!

If anyone knows how to install Emmet and LSPs on this bad boy, let me know.

I’ve been jamming small wood chocks and rolled up bits of paper under this <div> for hours in an attempt to get it level, but I still can’t get it aligned quite right.

Next time I write display: absolute, just kill me.

Me quickly cycling through all the CSS display properties: ‘Surely one of these bails me out…’

Just marked a margin as !impotent. Sorry margin.

Local man forgets to put content: "" on his pseudo-element for fifth time this week, spurring community concern.

A CSS reset, but every value is suffixed with !important.

Doing some work for a company which has me writing some legacy CSS. Proper 2009-era stylesheets with a bit of SASS thrown in and a clear brief to work off.

Having a blast!

(As an aside, I know that everyone is talking about this upcoming flexbox malarkey, but I think I’ll stick with floats, thank you very much.)

User Agent Styles are out because today we are introducing all-new AI-driven User Agentic Styles.

That is right; they arbitrarily change while you use the website, elevating the developer experience.

They will also try to forcefully align elements for you.

I went to a bank and put a really high negative margin on all the money inside. This offset was enough for it to appear outside the bank, allowing me to abscond with it.

Of course, banks can easily avoid this situation by applying overflow: hidden to their vaults, but they very rarely remember to. It tends to be an operational oversight.

Learn more neat tricks like this in my upcoming book: CSS for Crime.

Sometimes I scroll through all the possible align-* and justify-* permutations to find the one I need.

Not for lack of knowledge, but instead because my brain has simply run out of compute.

I left my flexbox out in the sun for too long, which caused it to dry up. Now it won’t wrap anymore.

Do I need to get a new one, or can I rehydrate it somehow?

Last night I crept into your house under the cover of darkness and made almost imperceivable modifications to your browser’s user-agent stylesheet.

Changes just impactful enough that you will be mildly inconvenienced. I chucked a few !importants in there as well.

My evil knows no bounds.

You use * + * because it is a useful CSS snippet. I use * + * because I think it looks funny, and I like saying ‘lobotomised owl’.

We are not the same.

CSS Carousel Debacle

Carousels are a web staple. Websites use them, and thus people do in turn. They’ve garnered a lot of hate over the years, primarily due to being largely inaccessible and poor ways of presenting information, yet still they persist. So, if you can’t beat ‘em, join ‘em.

The Chrome team put together Carousels with CSS which Sara Soueidan has examined in extreme depth. My main takeaway from the main article and Sara’s analysis is that while this is a vague step in the correct direction, it doesn’t address any of the core issues like accessibility and introduces new ones. I was disappointed to see the approach taken in regard to addressing those issues and think Eric Eggert hit the nail on the head.

It completely fails with regard to separation of concerns by using CSS for structure, rather than HTML. I don’t know how to address that other than asking why? I’ve noticed a lot of new CSS features, especially ones with the Chrome team’s influence, are getting a little too markup-y for my liking. David Bushell has covered this and the over reliance of pseudo-elements with touchings on the carousel kerfuffle.

HTML is for structure, CSS is for styling, JS is for anything that can’t be achieved with HTML/CSS, and accessibility isn’t omittable. We should be striving to build a web that is both functional and inclusive. Respect the web; respect users.

HTML. CSS. JavaScript.

Long ago, the three nations lived together in harmony. Then, everything changed when The Frameworks attacked.

Well now look what you’ve gone and done! You’ve spilt JavaScript all over my lovely semantic HTML. Dammit! It leaked onto my CSS as well.

Go grab a cloth and clean up this mess.

‘The web is my canvas,’ I confess as the people watching over my shoulder observe me open a text editor and tile a browser window. ‘CSS is my brush; MDN, my muse.’

CSS has taken me places I wouldn’t go with a gun.

Evidently I have a reputation…

There is very little in this world more satisfying than getting CSS shorthand correct first time.

Why is my pseudo-element not working? It should work. It has size, position, display, etc. Hmm…

Oh, I didn’t specify content: "".

Anywho, I’m gonna go into a fetal position and cry now…

My favourite CSS addition in recent years is a toss-up between light-dark and nesting.

Both have been such game changers and vital to how I build for the web.

Who is working on porting all the PowerPoint transitions to the browser for use with the View Transition API?

Let’s put this masonry debate to rest. I propose we replace grid with masonry altogether. Think about how much trendier everything will be.

If you make a CSS centring joke in the modern era, you deserve to be put in a metal flexbox and centred to the middle of the ocean.

Speakers of English (traditional) rejoice, for I have fixed CSS. You can sleep easy knowing that there exists an easy way to permit writing ‘colour’ as ‘colour’.

BritCSS is a simple bit of client-side JS that permits using English spellings.

Always fun to put together small things like this because I inevitably learn something I didn’t know.

https://github.com/DeclanChidlow/BritCSS

I had a vision.

The CSS Masonry angel came down from the heavens and addressed me. I made to speak, but it reached out a single slender finger and touched it to my lips to hush me. ‘Soon,’ it said with the voice of a choir. ‘Soon.’

position: sticky is one of those CSS things I can never get first time. Try as I might, I always end up flubbing around with it.

CSS crimes are the best crimes.

I kinda miss the days when sites would get complete redesigns pretty much annually. It kept the web feeling fresh and cutting edge.

I suppose it was simpler to do everything over when all it took was a bit of hacking away with HTML and CSS.

Usually it’s infuriating, but sometimes it can be fun to write CSS within the constraints of existing, untouchable HTML.

Does Flexbox still feel really new to anyone else?

It is like my concept of ‘new CSS things’ just broke at some point.

Just spent 5 minutes on CodePen wondering why my CSS wasn’t working.

postion: absolute

Hurrr

Were you all just gonna let me keep on living without telling me about the rch unit?

This is so insanely useful for one specific thing I ended up fixing with JS the other day.

I know it’s time to take a break when I start pulling this stunt:

body {
    color = white;
}

A wise man once said ‘Ogres are like onions. Onions have layers. Ogres have layers.’

Make your CSS like ogres and onions.

New CSS logo dropped. It looks great! Now, when do I get all those cool unused designs on a shirt?

People seem to come unstuck at the ‘cascading’ bit of ‘cascading style sheet’.

Embrace the cascade!

Blimey, I’m lovin’ <dialog> and the Popover API. JavaScript free* menus without the need for any hacks.

I used to use some trickery involving CSS’s :target to implement menus…

This is only gonna get cooler when anchor positioning gets more comprehensive support. Top layer elements and anchor positioning go together like butter and toast.

I barely find myself needing CSS ‘hacks’ anymore. Most stuff I need to do is kinda just a thing now.

Thanks to all the many people who’ve made this a reality!

Does it bother anyone else that it is top not inset-top, like margin-top?

I’ve just discovered the super handy hue-rotate CSS filter.

I’m using it as such: filter: invert(1) hue-rotate(180deg);

It lets me invert an item, but keeps the colours as they should be by flipping the hue back. I’m finding use implementing it on iframe embeds to force darkmode.

Oh my, I love this new CSS lh unit. It’s equal to the computed line-height. This is gonna make inline SVGs and icons so much easier! I’m in ecstasy.