Some experimental techniques for creating click-like events with pure CSS.
Various external hand-picked links to CSS-based content from around the web. Subscribe via RSS.
Some experimental techniques for creating click-like events with pure CSS.
(Reposted due to URL error) An extensive post by Philip Walton. I like what he says near the start: “[I]nstead of laying out an argument for my own set of best practices, I think we should start by defining our goals. If we can agree upon the goals, hopefully we can start to spot bad CSS not because it breaks our preconceived notions of what’s good but because it actually hinders the development process.”
Lots of great advice from David Storey on CSS3 and some of the things that have changed.
A quick tip on dealing with placeholder text that gets cut off on smaller screens when an input shrinks.
A simple tip by Lea Verou. I think most experienced devs know this, and the only reason we ever include those extra keyframes is for readability/understandability when writing tutorials and such.
If you’ve had problems with CSS triangles or other shapes in Firefox, you might want to check out this post.
From Digitalpaint’s HTML and CSS Advent Calendar, this post is worth it just for the on-page demos (with adjustable sliders) showing off WebKit’s filter features (sepia, blur, shadows, etc).
Why didn’t I think of this?
To see this tool in action, download Chrome Canary, then launch it and type “chrome:flags” in the address bar. Look for “experimental webkit features”, enable it, then relaunch Canary.
A nice brief and straightforward discussion by Oliver Ash about modular CSS and how it can be problematic to modify modules rather than extend them.
Lots of new CSS features discussed in this slide deck by Tab Atkins. Is it just me, or is this like the 10th different article and/or slide deck that has this title?
An article on CSS modules posted on a new blog called “The Nitty Gritty”, just launched by Hans Christian Reinl and Kahlil Lechelt.
This is a cool technique from Simurai using CSS3 keyframe animations with the steps() syntax as the value for the timing function. Very innovative as it allows you to animate a PNG (which has more colors than GIF). He even links to a site that’s already using this technique for their logo.
This might be a tad overkill with the extra markup and calculations, but once you get used to it (and assuming it’s not bad for performance), it looks like a really cool solution to ensuring images have a common focal point on all screen sizes.
This is something a little different. I like that it discusses some not-so-common CSS selectors, although the effect itself might not be extremely useful.
Good article by David Storey. I like this part: “Online content becomes stale, but newer and more accurate information takes a while to bubble to the surface, because older articles have had time to build up strong search engine ranking.” Very true.
Nick La discusses responsive multi-column layouts using nth-of-type pseudo-classes and pseudo-class expressions.
This resource, it seems, has just launched, so although there’s not much here, it would be cool to check it out in a few months or so. It’s a repository for easy copy-and-paste single div, pure CSS icons.
Joshua Hibbert has built a simple little tool to check if your border-radius values are correct when nesting elements that both have rounded corners.
A simple reminder from PPK that CSS3 hyphenation is now supported in three modern browsers. I wonder: Would this be something appropriate for a CSS reset?
I have no idea of the validity or relevance of this test, but it’s interesting to see (in this example at least) how much better transitions perform than jQuery animations.
If you use Sublime Text 2, and want to speed up your CSS development, this looks very cool. Evidently, it’s supposed to learn your style of coding, so you don’t really have to remember any abbreviations. Seems too good to be true, and may cause more problems than it’s worth. But certainly worth a look.
I still can’t wrap my mind around why data URIs even work to begin with, but this data URI generation tool looks like the nicest and easiest one to use yet.
The new @supports directive is the future of feature detection. Opera is the first browser to support it, and chris Mills has the lowdown on the syntax plus some examples.
I’m really disappointed that this demo is of a guy pointing a gun (do we need more violent imagery in this world?), but this article and demo are must-see content for CSS3 developers.
CSS best practices seem to be hot this week, and Hugo’s article on CSS adds to that. Lots of good info here.
This article is one of the best articles you’ll read covering CSS practices to avoid. Great stuff by Harry Roberts that I’m sure we’re all guilty of.
Great idea by Dudley Storey to use the invert() function to create better print pages.
I don’t really like the term “rule” being used for this (it’s actually a property, but whatevs), but this certainly looks like a pretty extensive post on CSS cursors.
My head’s still spinning from trying to understand this. But maybe someone else can decipher it, because it sounds pretty cool. :)
Some good advice from Microsoft, imploring developers to update their code to help mobile users get a better experience on IE10.
Steven Bradley with a good detailed discussion on the behaviours and characteristics of floats and inline-block elements. Probably not too much new here for experienced CSS devs, but a great overview for CSS beginners and intermediates.
A lengthy article, but probably relevant to anyone using a preprocessor, and particularly useful for those still wondering about the LESS vs. Sass issue.
Laura Kalbag discusses “mobile first”, with a focus on why display: none shouldn’t be overused in responsive layouts.
A nice easy visual way to test and learn how :nth-child() works. Probably more useful if you already know the syntax to some degree, because this won’t teach you from scratch, but a nice clean way to do it nonetheless.
A briefly stated but valid concern about the direction and future of CSS, and our current understanding of it.
Yet another one of these “Photoshop styles to CSS3″ tools, this time free and in the cloud.
My first article for Treehouse, covering CSS positioning (position: relative, position: absolute, etc.)
I’ve thought about this many times, whether or not uppercase text that is lowercase or title case in the source code should be copied to the clipboard in lower/title or upper. I don’t think CSS should affect what is copied to the clipboard. But Hallvord makes a good point in saying that this shouldn’t break user expectations.
Ebay is in the process of rolling out a new design, and this post on PEPSized explains how to achieve the scrolling effect on their new design preview page.
A short little collection of reusable CSS3 form element styles that you can grab.
But this one’s pretty cool. Not sure of browser support, but I’m guessing IE8 and below are out of the loop.
Apparently this works in IE10 and nothing else, but might also work in later versions of IE.
I’ve seen this sort of hack before, but didn’t realize there were so many IE version-specific options for it. Interesting, and as pointed out in the comments, this might be useful for mobile first styles, so you can keep everything in the same place.
Might be some performance issues with this, but an early polyfill for CSS filters, which are only available in Webkit right now.
Lots of great new CSS features mentioned in this slide deck by Peter Gasston.
A neat demo site by Adobe showing off and discussing some of the latest CSS3 stuff. You can read about it in detail on this post.
This is not yet supported by any browser that I know of, but it looks like a couple of months ago the conic-gradient notation was added to the latest images spec (CSS4 images, which is, oddly, still part of CSS3).
An interesting article about a problem with rounded corners when combined with linear gradients in IE10. Looks like a rare edge case, but good to know should you run into this problem.
Another cool demo, this time on MDN. This is a Super Mario Brothers clone, but done using CSS3 animations that are triggered by resizing the browser window.