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.


Tuesday, March 24th, 2009

Firefox support for CSS3 multiple backgrounds

Category: Browsers, CSS, Firefox

James Hall saw the good news in Bugzilla that CSS3 multiple backgrounds are now in the Firefox tree, and you can test a Firefox Nightly (Minefield). Firefox joins Safari in the support. Usage? < View plain text > css background-image: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif); background-repeat: repeat-y; background-position: top left, top right;

Posted by Dion Almaer at 5:39 am
10 Comments

++++-
4.4 rating from 45 votes

Apple’s CSS and SVG work starts to make it to W3C

Category: Apple, CSS, Standards, SVG, W3C

On Friday, the SVG and CSS working groups of the W3C published the first working drafts of Apple’s proposed graphics and styling extensions: The CSS and SVG Working Groups delivered today five new specifications for public review, aimed at enabling more compelling content creation with open Web technologies. The five drafts are: SVG Transforms 1.0, Read the rest…

Posted by Dion Almaer at 12:04 am
3 Comments

++++-
4.5 rating from 26 votes

Friday, March 20th, 2009

WebKit now let’s you style scrollbars

Category: Browsers, CSS

There are a couple of camps out there that like to argue between “let me change anything I want” and “don’t give developers power as they will build crappy things.” In today’s context, that would be “have you seen the crappy Flash scrollbars that are SO hard to use?” After having to deal with this Read the rest…

Posted by Dion Almaer at 1:10 am
16 Comments

+++--
3.1 rating from 34 votes

Wednesday, March 18th, 2009

Sizzlin’ YUI

Category: CSS, Yahoo!

Eric Ferraiuolo has picked up on the work that Matt Sweeney has done integrating Sizzle with YUI3: Great news for YUI3: Matt Sweeney, a YUI Developer, has integrated the Sizzle JavaScript Selector Library in a branch of the YUI3 code-base on GitHub. There has been interest from the community about this integration for quite some Read the rest…

Posted by Dion Almaer at 5:52 am
Comment here

+++--
3.1 rating from 7 votes

Wednesday, March 11th, 2009

Is optimizing CSS selectors worth it?

Category: CSS, Performance

For most web sites, the possible performance gains from optimizing CSS selectors will be small, and are not worth the costs. There are some types of CSS rules and interactions with JavaScript that can make a page noticeably slower. This is where the focus should be. So I’m starting to collect real world examples of Read the rest…

Posted by Dion Almaer at 8:44 am
2 Comments

++++-
4.4 rating from 26 votes

De-crocking HTML5

Category: CSS, Fun

Stephen Celis has a fun post talking about Douglas Crockfords HTML 5 comment, namely: …the HTML5 project is misguided… It is trying to do too much without a clear mission that defines the problems it is solving. I think the project needs a reset. He comes back: Where’s the glitz, though? The dazzle? What can Read the rest…

Posted by Dion Almaer at 8:42 am
6 Comments

++---
2.5 rating from 28 votes

Friday, March 6th, 2009

CSS3 Fun Tests and Hackz

Category: CSS, Standards

What would you get if you have a sample that used the following CSS3 features: border-radius* text-shadow box-shadow* column-width* column-gap* column-rule* @font-face border-color* This, if you are viewing in FF3.1+: All via: < View plain text > HTML <style type="text/css" media="screen">     @font-face {         font-family: Delicious;         Read the rest…

Posted by Dion Almaer at 6:59 am
Comment here

+++--
3 rating from 7 votes

Wednesday, March 4th, 2009

Using Polygonal CSS for imageless tooltips and more

Category: CSS

The Filament Group has written up a great article on using polygonal CSS for image free tooltips with pointers. This means building the following without any images: This harkens back to Tantek’s work on polygons and shows how you can build them: Polygonal CSS works by setting an element’s width to something small and then Read the rest…

Posted by Dion Almaer at 3:57 am
10 Comments

++++-
4 rating from 55 votes

Saturday, February 28th, 2009

Nicole Sullivan’s Object Oriented CSS

Category: CSS

Sometimes I’m so focused on JavaScript that it becomes a bit of a hammer for me that I try to use it on all problems. I forget about the power of CSS and what it can do. I recently met Nicole Sullivan at Web Directions North who is a CSS guru, especially around performance. She Read the rest…

Posted by Brad Neuberg at 6:00 am
27 Comments

++++-
4.2 rating from 49 votes

Monday, February 23rd, 2009

Building a presentation experience using CSS transitions and animations

Category: CSS

JavaScript guru extraordinaire Erik Arvidsson has been playing with the new CSS transitions and animations that WebKit lead out with. He decided to build a sample presentation system: It is interesting to see the three versions that he builds. First, he uses CSS animations and @keyframes, and all that goodness, but for what he was Read the rest…

Posted by Dion Almaer at 1:51 am
Comment here

+++--
3.8 rating from 22 votes

Friday, February 6th, 2009

CSS Animations in WebKit Nightly and iPhone

Category: CSS

Fire up WebKit nightly, or point your recently updated iPhone to check out this beautiful leaf animation all made possible with CSS Animation. A simple bounce animation is shown to give you an idea of how it works: < View plain text > css @-webkit-keyframes bounce {  from {    left: 0px;  }  to { Read the rest…

Posted by Dion Almaer at 1:23 am
9 Comments

+++--
3.9 rating from 21 votes

How many engineers does it take to create a cross browser button?

Category: Component, CSS, UI

So, you want to create a button that you have full control over, and you want it to work well cross browser. Shouldn’t be hard right? Wrong. Doug Bowmanepines about the job of doing just this, which is something he kicked off at Google, and we see the result in apps such as Sites and Read the rest…

Posted by Dion Almaer at 12:01 am
9 Comments

++++-
4.3 rating from 47 votes

Wednesday, February 4th, 2009

CSS for Layout. Another Rant

Category: CSS

The old chestnut has come out again, with this rant on CSS for layout which has caused a fuss, and thus a follow up post. The basic gist is: While CSS should be used for styling, tables should be used for layout. The author lays out annoyances such as, CSS floats: Apparently the order matters. Read the rest…

Posted by Dion Almaer at 7:36 am
73 Comments

+++--
3.2 rating from 46 votes

Wednesday, January 28th, 2009

Sitepoint relaunches reference site

Category: CSS, Examples, HTML, JavaScript

The Sitepoint reference guide has been relaunched. It looks very clean indeed. Here is an example of docs for the getElementById method. You will see that it has basic info, compatibility charts (although they are minimal… saying things like “buggy” instead of why), and hints. For example: The behavior of this method when more than Read the rest…

Posted by Dion Almaer at 5:26 am
3 Comments

++++-
4.1 rating from 32 votes

Wednesday, January 21st, 2009

CSS Selector Shell: See what the browsers see

Category: CSS, Utility

Lindsey Simon was always a great guy to chat with at Google. He always had an idea and something cool that he was working on. His latest little tool is fun to play with. It is called CSS Selector Shell and it “is a browser-based tool for testing what CSS becomes in different browsers. It Read the rest…

Posted by Dion Almaer at 7:55 am
1 Comment

+++--
3.9 rating from 39 votes

Thursday, January 15th, 2009

CSS Transitions Shim; Getting transition support into other browsers

Category: CSS

Weston Ruter has developed a very nice shim that allows you to get CSS Transitions support in browsers that do not have the WebKit renderer. He has an innovative approach that uses XBL and HTC bindings to detect when a style rule changes and thus when the selected elements need to be animated/transitioned into the Read the rest…

Posted by Dion Almaer at 5:09 am
3 Comments

++++-
4.1 rating from 19 votes