Tag Archives: css

The W3C Has Released the First Working Draft of CSS4

Oct 7, 2011 by Matt | Posted in Design No Comments

Yes, you read that properly. The W3C has released the first specs for CSS4. Now that most modern browsers are well on their way to supporting CSS3, the W3C is getting started on the next “layer” of CSS.

The Selectors Level 4 document already has one feature that is unfortunately missing from CSS3: parent selectors. You will finally be able to do things like selecting all a elements that have an img element inside them, with this syntax: $a > img { ... }.  The draft also mentions “nth-column” selectors, for styling all of the cells in a specific table column.

Of course, it’s probably going to be awhile until we start seeing browsers supporting this on a usable level.

Before anyone comments about the CSS3 spec not being “finished,” note that W3C specs are not prescriptive. They’re not “finished” until they’re pretty much supported by the major browsers, and changes have been made based on the implementation. A couple of the documents for CSS3, Selectors Level 3 and CSS Color Module Level 3, are already under the Completed Work section of their website.

Prefixr: Cross-Browser CSS in Seconds

Sep 12, 2011 by Matt | Posted in Design No Comments

Many CSS3 attributes (e.g. border-radius) have long been implemented in various browsers with vendor prefixes, such as -moz and -webkit, which allow browser vendors to work on implementations of new features before the standard notation is set in stone.

Remembering the different prefixes and the sometimes ridiculous variations in syntax for the attributes is a pain. Fortunately, Nettuts+ has made a nifty web utility that analyzes your CSS and adds in extra rules with the vendor prefixes. You just need to write your CSS with either the official attribute or one of the prefixed versions, and Prefixr will do the rest for you.

It can even minify your CSS for you. (Though Mac may users may also want to try Minimus for that.)

If that wasn’t cool enough for you, it even has an API. You could use this to create your own tools that make use of Prefixr, or you could use it to integrate it with your favorite text editor. Examples are included for Textmate, Vim, Espresso, Alfred and Coda. And someone has already cooked up a Text Filter for BBEdit. That’s the killer feature for me. I can just hit a keystroke in BBEdit and the text updates a second later.

Cross-Browser CSS in Seconds with Prefixr [Nettuts+]

Bootstrap: Twitter’s CSS Framework

Sep 5, 2011 by Matt | Posted in Design 7 Comments

Twitter has a new CSS framework, named Bootstrap, that they launched recently, which includes things like grids, custom form styles, tooltips and popovers, etc..

Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.

It supports modern, standards-compliant browsers, but I imagine some of the niftier features would probably break down on older ones. That would be a big issue if you wanted to use Bootstrap for an ordinary website, but less so for “web apps,” where it’s more common to assume a user has a modern browser.

I haven’t tried Bootstrap yet, but you can give it a test run by hotlinking the 7kb minified CSS from their GitHub repository. Or download the LESS files from the repository if you want to customize it.

Bootstrap from Twitter [Twitter Developer Blog]

Minimus: The OS X JavaScript and CSS Minifier

Jul 18, 2011 by Matt | Posted in Featured, Software & Scripts 19 Comments

Users like fast websites. That’s one of the universal rules of web development. To attain faster speeds, it’s common to use a process known as “minification” to compress the file size of JavaScript and CSS. Yahoo developed one of the most commonly-used tools for this, a command line program called the YUI Compressor. This open source project has become integrated into many other tools, including numerous websites that will minify any JavaScript or CSS you paste into a form field.

That’s rather inconvenient, though. Wouldn’t it be easier if you had a nice OS X application that would let you minify your code right from your Mac? Enter Minimus, the app I just finished.

Minimus is a handy GUI frontend for the YUI Compressor. All you have to do is drag one or more files onto the dock icon, hit a button, and in seconds you will have minified copies.

It’s a free download, but if you like it, feel free to send me $5 or so with the in-app PayPal form. ;)

Easy CSS Sprites with Sprite Cow

Jul 13, 2011 by Matt | Posted in Design No Comments

CSS sprites are a commonly used technique to decrease page load times. One of the biggest hassles when setting them up, though, is figuring out the coordinates for the images in your sprite. (The other is rebuilding the sprite when you want to add new graphics…)

There’s not much to be done for the latter, but there is a handy tool that makes finding the coordinates painless. Sprite Cow intelligently draws a box around an image you select in your sprite sheet (after you load the sprite, of course) and writes the CSS for it. You can’t get any simpler than that.

I bet the developers could make some good money by making a Mac version and putting it up for sale in the App Store.

Where to Find Free Fonts for CSS @font-face

Jul 6, 2011 by Matt | Posted in Design 4 Comments

If you’ve discovered the magic that is the CSS @font-face property, then you have likely run into one of its biggest problems: while there are plenty of free fonts online, not many are licensed with terms that allow you to use them with @font-face. A you’re technically “redistributing” the font when you upload it to your web server and reference it in a CSS file, which causes browsers to download it, you run afoul of the fonts’ licenses more often than not.

Fortunately, there are typographers designing fresh new fonts and licensing them with @font-face in mind. Where do you find such fonts? There are a couple of sites that I recommend.

The League of Moveable Type

The League of Moveable Type is dedicated to providing “the most well-made, free & open-source, @font-face ready fonts.” It’s one of my favorite sources for fonts these days, and their collection, though on the small side currently, has only excellent examples.

Font Squirrel

Font Squirrel is a font aggregator, along the lines of DaFont.com, that only lists free fonts available for commercial use, and many that are @font-face ready. They also have a handy generator to convert a TTF or OTF font into the various formats required for the bulletproof @font-face syntax. And they have pre-made “@font-face kits,” too. You can toggle a checkbox near the search bar if you only want to include @font-face ready fonts in the results.

MacRabbit isn’t Dead!

Jul 1, 2011 by Matt | Posted in Software & Scripts One Comment

Users of Espresso and CSSEdit have been complaining for some time about the lack of updates to the software. In a surprise announcement, MacRabbit (the developer) announced that Espresso 2 is on the way and that CSSEdit’s functionality is being rolled into it.

The long wait has grated both on our own nerves and those of our awesome users. But while we have kept quiet publicly about what we are working on, it is because privately we have been striving to transform our products into something new and even more awesome: Espresso 2. We are extremely excited to finally be able to show you what we have been working on, as this release will be of interest to both CSSEdit and Espresso users.

An early preview, the “kaboom” release, is already available for testing and upgrade path information has been posted.

The League of Moveable Type

May 23, 2011 by Matt | Posted in Design No Comments

Looking for some high-quality open source fonts, perhaps to use with @font-face? Look no further than The League of Moveable Type, an organization that curates a collection of professional typefaces licensed in a way that doesn’t inhibit your ability to use them on the modern internet.

We’re done with the tired old fontstacks of yesteryear. Enough with the limitations of the web, we won’t have it. It’s time to raise our standards. Here, you’ll find only the most well-made, free & open-source, @font-face ready fonts.

Their blog also occasionally links to other open fonts, along with other things of interest to typography nuts.

The current selection is impressive, though there are currently only 14 or so typefaces at this time. I’m particularly a fan of League Gothic and Goudy Bookletter 1911.

How To Create a Stylish Button Entirely with CSS3

Apr 27, 2011 by Matt | Posted in Design No Comments

Web designers have been making dynamically-sized buttons using the “sliding doors” trick for awhile now, but isn’t that technique so 2003? Wouldn’t it be cooler to construct buttons using only CSS?

Line25 has a fresh tutorial on How To Create a Stylish Button Entirely with CSS3.

Next we can begin styling the button with a coloured background, this is where CSS gradients come in handy. Two colour swatches are converted into gradient syntax for both Mozilla and Webkit browsers using the handy CSS Gradient Generator, then a fallback option of a flat colour is added for non-supporting browsers.

The tutorial only uses the -moz and -webkit gradient properties, but someone in the comments included ones for Opera, Internet Explorer 10 and the W3C’s proposed syntax for the actual CSS3 spec.

CSS3 Multiple Backgrounds

Mar 28, 2011 by Matt | Posted in Design No Comments

CSS3 has a nifty feature that I wasn’t aware of until recently: multiple backgrounds per element. This was something I used to wish for frequently before I got used to faking it by nesting DIVs and assigning them single backgrounds. Chris Coyier’s CSS-Tricks blog pointed this neat part of the spec out.

The syntax is easy, you just comma separate them. I find it’s easiest/best to use the background shorthand property so you can declare the position and repeating and whatnot and keep them all grouped together. What isn’t obvious while looking at the syntax is which image is on top in the vertical stacking order when those images overlap. The spec is clear in this regard and browser implimentations follow. The first is on top and they go down from there.

The syntax looks something like this:

/* Fallback for older browsers */
background: url(fallback.png) 0 0 no-repeat;

/* Multiple backgrounds! */
background:
url(top.png) 0 0 no-repeat,
url(middle.png) 100px 0 no-repeat,
url(tile.png);

Is that cool or what?

If having missing images just isn’t acceptable for your site, you can use a little “hack” to load a fallback background. Placing the first background property seen in the above code snippet will allow for graceful degradation, as older browsers will simply ignore the newer version of the background declaration. It has the disadvantage of loading it anyway with newer browsers, though. I think a better option is using the single-property for design-critical images that need to load in any browser and using the other for progressively enhancing elements.