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.


Monday, June 30th, 2008

CSS Variables are …. here!

Category: CSS, WebKit

We talked about how CSS variables are next a few months back, and now they are here! WebKit now has an experimental implementation of CSS variables: You can test this feature using a WebKit nightly Test cases Once again, via Dylan Schiemann.

Posted by Dion Almaer at 11:26 am
24 Comments

+++--
3.7 rating from 41 votes

Friday, June 27th, 2008

CSS General Sibling Combinator in action

Category: CSS, Tip

< View plain text > css #indirect-example1 h4 + p, #indirect-example2 h4 ~ p {     background-color: #CCC; color: #F00; } Eric Wendelin has taken a look at the general sibling combinator shown above as: < View plain text > css h4 ~ p {} This would affect each <p> element that is a Read the rest…

Posted by Dion Almaer at 8:20 am
6 Comments

+++--
3.6 rating from 26 votes

Thursday, June 26th, 2008

YUI Autogrid: Correctly resize the grids

Category: CSS, Yahoo!

Our own Christian Heilmann has created a new JavaScript library Autogrid that marries YUI Grids, the base CSS library, to allow for smart resizing: I love YUI Grids. I know my CSS and I know how to work around diff erent problems of browsers, but I am also very much bored about having to fix Read the rest…

Posted by Dion Almaer at 8:01 am
9 Comments

++---
2.9 rating from 27 votes

Monday, June 2nd, 2008

Flipping out over Safari

Category: CSS, Tip

Thomas Fuchs is having some fun at RailsConf, and sent out a fun use of the new WebKit transformations using the medium of the bookmarklet: < View plain text > javascript javascript:document.body.style[‘-webkit-transform’]=’rotate(180deg)’;   javascript:document.body.style[‘-webkit-transform’]=’rotate(‘+prompt(‘degrees’,180)+’deg)’; Use this bookmarklet (drag to bookmarks bar): flip or this one if you want a prompt: flip2.

Posted by Dion Almaer at 5:01 am
4 Comments

+++--
3.4 rating from 30 votes

Monday, May 26th, 2008

W3C CSS Namespaces; Now a Candidate Recommendation

Category: CSS, Standards

The CSS Namespace Module has now been bumped up to a “W3C Candidate Recommendation”, thanks to the work of Elika J. Etemad and Anne van Kesteren (who built on the earlier work of Peter Linss and Chris Lilley). The module is simple, but will be a very welcome addition: This CSS Namespaces module defines the Read the rest…

Posted by Dion Almaer at 9:26 am
3 Comments

++++-
4 rating from 13 votes

Wednesday, May 21st, 2008

classy_inputs: Rails plugin to add autoclass names

Category: CSS, Ruby

We all want to use input[type=text] but browser support doesn’t seem to quite be there (IE 6?). This lead James Coglan down the path of creating a teeny Rails plugin, classy_inputs: Good lord do I ever hate input tags. (YUI hates them too, but I’ll leave that story for another time). All the different types Read the rest…

Posted by Dion Almaer at 9:50 am
6 Comments

++---
2.8 rating from 11 votes

Wednesday, May 14th, 2008

CSS Animations via MooTools

Category: CSS, MooTools

Chris Schneider has created a javascript implementation of CSS Effects using the MooTools JavaScript library. It basically parses the css and mimics the new Webkit css animations. With the introduction of CSS we could seperate the presentation layer and the content layer, but we were not able to add animations via CSS. DHTML fixed this Read the rest…

Posted by Rey Bango at 1:01 pm
13 Comments

++++-
4 rating from 53 votes

Tuesday, May 13th, 2008

Timelapse CSS

Category: CSS, Fun

Matthew Buchanan had a little fun and created a Timelapse CSS example that lets you walk through the process of how a browser would put together a page if it was a human artist: When building website templates, I’m constantly switching between a view of my CSS code and a view of the page I’m Read the rest…

Posted by Dion Almaer at 11:08 am
6 Comments

+++--
3 rating from 52 votes

Monday, May 12th, 2008

CSS Child Selector Performance

Category: Browsers, CSS, Performance

Are child selectors slower than more simple brethren? This is a question that Jon Sykes sought out data for after he read the work of Jim Barraud. His conclusion? The skinny is that child selectors are a major performance issue. This seemed to make sense, but to me I needed some sort of proof rather Read the rest…

Posted by Dion Almaer at 10:44 am
15 Comments

++++-
4.4 rating from 30 votes

Wednesday, May 7th, 2008

line-height: painful

Category: CSS

Eric Meyer has felt a lot of pain due to line-height, which means us mere mortals are totally up the creak. He posted about how line-height is abnormal and goes into detail on his learning curve, and the pain he saw which lead him too: Why bring all this up? Because I went and poked Read the rest…

Posted by Dion Almaer at 7:15 am
4 Comments

+++--
3.9 rating from 22 votes

Tuesday, May 6th, 2008

Details of button padding in various browsers

Category: Browsers, CSS

After building a slide deck with Ben, you learn the art of a perfectionist. He would love Chris Hester’s posting on button padding that shows you how your buttons look on various browsers and operating systems. Even been frustrated when you try to style things on the Mac? Here are a few of his findings: Read the rest…

Posted by Dion Almaer at 6:32 am
4 Comments

++++-
4.4 rating from 44 votes

Friday, May 2nd, 2008

We are JavaScript library authors. Hear us roar!

Category: Browsers, CSS, JavaScript

John Resig “doesn’t think there’s a single JavaScript developer who isn’t excited about the new Selectors API specification (and the upcoming implementations).” He was asked to provide feedback on the API, and he sent them an email with just that. He had three concerns: DOMElement.querySelectorAll returning incorrect elements This is the most critical issue. As Read the rest…

Posted by Dion Almaer at 10:40 am
2 Comments

+++--
3.9 rating from 27 votes

Homer in CSS

Category: CSS, Fun

There is the David. There is the Mona Lisa. And then, the artist has to create the Homer. Román Cortés did just that with his Homer in CSS and Ned Batchelder shows it via animation. Thank god for fun fridays.

Posted by Dion Almaer at 10:20 am
7 Comments

++++-
4.7 rating from 56 votes

Friday, April 25th, 2008

CSS Variables are next?

Category: Browsers, CSS, WebKit

How long have you wanted to name colors and such in your CSS instead of having to use search and replace (which breaks if you share the same colors ;) ? We have a proposal thanks to Daniel Glazman and the ubiquitous David Hyatt. Since the release of CSS Level 2 Recommendation ten years ago Read the rest…

Posted by Dion Almaer at 8:49 am
27 Comments

++++-
4.6 rating from 46 votes

Tuesday, April 15th, 2008

CSS Gradients in WebKit

Category: Browsers, CSS, WebKit

Dave Hyatt, the one person I would love to get to TAE to join the other browsers, posted about CSS gradients in WebKit: < View plain text > css -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) So what exactly is a gradient in CSS? It is an image, usable anywhere that image URLs Read the rest…

Posted by Dion Almaer at 12:01 am
11 Comments

++++-
4.3 rating from 33 votes

Thursday, April 10th, 2008

Ajaxian Featured Tutorial: Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery

Category: CSS, JavaScript, jQuery

During his work in redesigning the Pathfinder web site, Brian Dillard came across the infamous IE6 transparent PNGs issue and used two methods to tackle the issues. He decided to do a nice write-up explaining how he worked around the fact that IE6, while it would render PNGs, would not retain their alpha-channel transparency and Read the rest…

Posted by Rey Bango at 2:12 pm
17 Comments

+++--
3.2 rating from 58 votes