CSS


CSS (Cascading Style Sheets) is a style sheet language that illustrates presentation semantics and is commonly used to provide a design framework for web pages written in HTML and XHTML.


Friday, September 26th, 2008

Maintaining Browser Specific CSS

Category: CSS, Tip

Nick Cairns saw our post on conditional CSS for browsers and followed up discussing how he handles maintaining IE specific CSS selectors: We keep our IE related styling right below the common (standards-based) declarations. BUT, we DON’T use hacks. Underscore hacks, * hacks, and all of those things that we all gave up with the Read the rest…

Posted by Dion Almaer at 6:35 am
20 Comments

++---
2.4 rating from 38 votes

Monday, September 15th, 2008

CSS Transforms: First WebKit, now Gecko too!

Category: Browsers, CSS

We discussed the WebKit CSS transforms that allow you to scale, transform, skew, and do matrix work through simple CSS. Mozilla has stepped up and Keith Schwarz posted on CSS transform support in Firefox thanks to the new -moz-transform: < View plain text > css -moz-transform: translate(100px, 200px); /* Move right 100 pixels, down 200 Read the rest…

Posted by Dion Almaer at 9:55 am
7 Comments

+++--
3.9 rating from 29 votes

Tip: Using a background image on an image

Category: CSS, Tip

Pascal Opitz answered the question “Can you set an image background on an image element?” in simple fashion. All you have to do is make sure that the image is display: block and has a padding. He put up a simple demo that uses a div with an image, and he applies backgrounds to both: Read the rest…

Posted by Dion Almaer at 5:23 am
8 Comments

+++--
3.8 rating from 47 votes

Thursday, September 11th, 2008

You are not alone. None of the rest of us can fathom CSS either.

Category: CSS

Dave Minter is obviously frustrated, which lead him to write You are not alone. None of the rest of us can fathom CSS either. He goes on a little rant that covers: Curvy corners Vertical floats Formatting for forms Floats within elements Graphical Buttons Column support Order Independence Widths on inline elements Addressing text within Read the rest…

Posted by Dion Almaer at 8:51 am
29 Comments

+++--
3.5 rating from 33 votes

Tuesday, September 2nd, 2008

Firefox implements 3 CSS properties: text-shadow, -moz-box-shadow and -moz-column-rule

Category: CSS, Firefox

Michael Ventnor has blogged about the new support for text-shadow, -moz-box-shadow and -moz-column-rule which follows on with Safari and Opera. The subtle effects really add a great touch when NOT used gratuitously. The samples are both ;) If you’ve been following the Gecko 1.9.1 development since it started then you’re probably already aware of, and Read the rest…

Posted by Dion Almaer at 8:36 am
5 Comments

++++-
4.5 rating from 45 votes

Monday, September 1st, 2008

CSS Sprites2: Return of the JS

Category: CSS, jQuery

In March 2004, Dave Shea wrote about CSS Sprites, and now he is back with CSS Sprites 2. He walks us through using JavaScript to make this all work nicely, and picks jQuery to get ‘er done: After putting this together piece by piece, we end up with: < View plain text > javascript $(document).ready(function(){ Read the rest…

Posted by Dion Almaer at 6:41 am
3 Comments

+++--
3.7 rating from 28 votes

Wednesday, August 27th, 2008

Towards Using Custom Fonts

Category: CSS, Design

A little while ago, we talked about the two competing custom font technologies for the Web: linking and “embedding” (aka EOT). With Firefox about to implement support for linking à la Safari, John Allsopp has a summary of the state of font technologies and an illustration of just how easy it is to use these Read the rest…

Posted by Ben Galbraith at 6:00 am
3 Comments

++++-
4.3 rating from 16 votes

Using CSS to do the print watermark technique

Category: CSS, Tip

Andy Pemberton has put together a simple solution to get the watermark technique to work nicely with print CSS. Check out the sample and pull up a print preview. He details the good, bad, and ugly: The Good The first step to getting a printable watermark is to use an inline tag, rather than background-images. Read the rest…

Posted by Dion Almaer at 2:14 am
Comment here

++---
2.7 rating from 24 votes

Monday, August 25th, 2008

Sizzle: John Resig has a new selector engine

Category: CSS, JavaScript

John Resig is working on a new selector engine called Sizzle: This is a new selector engine that I’m working on. It’s a work in progress! Not ready for use yet! It’s definitely not ready yet (got some minor outlier bugs in the standards-compliant browsers – and a bunch of major bugs in IE still Read the rest…

Posted by Dion Almaer at 12:48 am
20 Comments

++++-
4.3 rating from 37 votes

Thursday, August 21st, 2008

querySelectorAll is coming fast

Category: Browsers, CSS

We have all been talking about querySelectAll for awhile, but John Resig gives us a wrap-up that covers the state of play. He talks about the browsers, and the libraries that wrap them and clean up shop via code like: < View plain text > javascript function querySelectorAll(selector){   try {     return Array.prototype.slice.call( Read the rest…

Posted by Dion Almaer at 8:30 am
2 Comments

+++--
3.8 rating from 27 votes

Wednesday, August 20th, 2008

The lessons of CSS frameworks

Category: CSS

Jeremy Keith has been doing a great job blogging An Event Apart, and his writeup of The Lessons of CSS Frameworks by Eric Meyer caught my eye. Eric took a look at the most popular CSS frameworks (960, Blueprint, Content With Style, That Standards Guy, YAML, YUI, Elements, Tripoli, WYMStyle) and talks about choosing one… Read the rest…

Posted by Dion Almaer at 10:56 am
3 Comments

++++-
4.1 rating from 15 votes

Monday, August 18th, 2008

Transformie: Implement WebKit CSS transforms in IE

Category: CSS, IE, jQuery

Paul Bakaus, or jQuery UI fame, has created a nice little hack to implement WebKit CSS transforms in IE When you include the library, it can scan for your -webkit-transform-* transforms (soon to support the standard transform-*) and will go to work for you using a couple of nifty technologies all put together: IE Filters Read the rest…

Posted by Dion Almaer at 7:43 am
9 Comments

+++--
3.6 rating from 35 votes

Wednesday, August 13th, 2008

border-image: No more cutting up hell

Category: Browsers, CSS

Remember when you wanted a growable area with rounded-goodness and you had to cut up the image into a million pieces to have the top corners and the sides? Since then we have gotten nice effects to help us, and John Resig just posted on how Firefox 3.1 will implement what WebKit already has in Read the rest…

Posted by Dion Almaer at 11:21 am
11 Comments

++++-
4.3 rating from 37 votes

Monday, August 11th, 2008

Conditional-CSS: Inline browser specific CSS

Category: CSS

Allan Jardine has created Conditional-CSS, a tool that allows a style sheet author to place IE style conditional statements inline with CSS to target multiple different browsers. Expanding the IE conditional statement syntax we get: < View plain text > css [if {!} browser]     or    [if {!} browser version]     or Read the rest…

Posted by Dion Almaer at 7:25 am
Comments Off on Conditional-CSS: Inline browser specific CSS

+++--
3 rating from 50 votes

Thursday, August 7th, 2008

CSS variables considered harmful?

Category: CSS, Standards, W3C

Bert Bos, a W3C fellow, thinks that CSS variables are to be considered harmful: Adding any form of macros or additional scopes and indirections, including symbolic constants, is not just redundant, but changes CSS in ways that make it unsuitable for its intended audience. Given that there is currently no alternative to CSS, these things Read the rest…

Posted by Dion Almaer at 8:06 am
24 Comments

++++-
4.3 rating from 22 votes

Thursday, July 17th, 2008

IEPNGFix 2: Now supports CSS background position and repeat

Category: CSS, IE

Ah the age old IEPNGFix solution to the problem that we had with IE 5.5 / 6.0 not supporting alpha transparency. The first IEPNGFix solved the problem: This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! It requires Read the rest…

Posted by Dion Almaer at 4:20 am
8 Comments

++++-
4.5 rating from 42 votes