Tags: styling

CSS Writing Mode

Some nifty layout tricks using the writing-mode property in CSS.

The Languages Which Almost Were CSS - Eager Blog

A wonderful deep dive into the history of styling languages before CSS. I love spelunking down these internet history potholes—fascinating stuff!

Styling Broken Images

This is really, really clever. You can’t use generated content (:before and :after) on replaced content. The img element is replaced content …but only when the image actually loads. So if the image fails to load, you can apply specific fallback styles (using :before and :after).

A simple HTML5 Progress bar | Charlotte Jackson, Front-end developer

I love this little markup pattern: simple, accessible and elegant …with some quirky CSS gotchas around styling non-standard prefixed pseudo-elements. They came from the Shadow DOM …dun dun DUN!

GOV.UK elements

I really like the clear styling of checkboxes and radio buttons in the GDS pattern library. Fitts’s law in action.

Contextual Styling: UI Components, Nesting, and Implementation Detail by Harry Roberts

Smart thinking from Harry here on a common issue when it comes to naming and styling. As he points out, the solution is not technical, but lies in how you form your mental model:

The design issue here is solved by subtly inverting the problem.

Awesomplete: Ultra lightweight, highly customizable, simple autocomplete, by Lea Verou

Lea wasn’t happy with the lack of styling and extensibility of the datalist element, so she rolled her own lightweight autocomplete/type-ahead widget, and she’s sharing it with the world.

JS Bin: Vertical centering is impossible in CSS lol!

Four different techniques for vertical centring in CSS, courtesy of Jake.

Axiomatic CSS and Lobotomized Owls · An A List Apart Article

I’m quite intrigued by the thinking behind this CSS selector of Heydon’s.

* + * {
    margin-top: 1.5em;
}

I should try it out and see how it feels.

Replacing Radio Buttons Without Replacing Radio Buttons

A great technique from Heydon for styling radio buttons however you want.

How to get your tweets displaying on your website using JavaScript, without using new Twitter 1.1 API

A little piece of JavaScript to strip out the styling from Twitter widgets.

Oh, no! How horrid! Now Twitter won’t control the “user experience” of that widget!

Instead, the person who actually posted the tweets in the first place gets to decide how they should be displayed. Crazy idea, isn’t it?

List of pseudo-elements to style form controls by TJ VanToll

Want to style those new HTML5 input types? I hope you like vendor prefixes.

On the styling of forms by Bruce Lawson

Bruce takes a look at the tricky issue of styling native form controls. Help us, Shadow DOM, you’re our only hope!

CSS3 Pseudo-Classes and HTML5 Forms | HTML5 Doctor

A look at the new pseudo-classes in CSS3 that go hand-in-hand with the form enhancements introduced in HTML5.

Stubbornella » Blog Archive » Don’t Style Headings Using HTML5 Sections

Nicole provides a step-by-step explanation of why it will probably benefit you to add classes to your headings to ensure consistent styling without writing overly-verbose CSS.

Line-height in input fields | 456 Berea Street

This abuse of the !important declaration in Firefox’s user-agent stylesheet was driving me crazy recently. Roger proposes a CSS patch, but this is really something that needs to be fixed in the browser.

Eric's Archived Thoughts: Formal Weirdness

Eric explores the dark cabbalistic world of attempting to style form controls. This explains why he doesn't use the universal selector for resetting default styles.