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.


Wednesday, April 2nd, 2008

IE 8 strict mode doesn’t allow for CSS opacity?

Category: Browsers, CSS, IE

Howard Rauscher tipped us off to this IE 8 ticket that talks about how opacity and IE 8 strict mode do not jive: Description IE8 Strict Mode correctly omits the filter: alpha(opacity=xx) in CSS which allows the user to specify the opacity in pre-IE8 browsers but does not implement the CSS3 opacity setting. While I Read the rest…

Posted by Dion Almaer at 9:13 am
26 Comments

++++-
4.4 rating from 47 votes

Tuesday, April 1st, 2008

Fun with SVG and CSS Animations

Category: CSS, Examples, SVG

Torrey Rice took Safari 3.1 and the new CSS Animations feature, and mashed it up with SVG to create a fisheye demo. All the functionality through CSS: < View plain text > css .dock img {    width:50px;    padding:10px;    float:left;    position:relative;    display:block;    -webkit-transition:width 0.5s ease-out, top 0.2s ease-out; }   Read the rest…

Posted by Dion Almaer at 7:45 am
3 Comments

-----
-2.7777777777778E+16 rating from 36 votes

Monday, March 31st, 2008

Browser CSS float error detection with jQuery

Category: Browsers, CSS, Debugging, jQuery

Mario Heiderich of Ormigo has created a jQuery based code snippet/bookmarklet that is capable of detecting floating errors and adding a dotted orange border to elements which should be cleared – but aren’t. It saved me a huge bunch of time debugging complex layouts for all browsers – especially IE6. If jQuery isn’t already loaded Read the rest…

Posted by Dion Almaer at 6:30 am
7 Comments

++++-
4 rating from 25 votes

Saturday, March 15th, 2008

Progressive Enhancement with CSS support

Category: CSS, Testing

Via John Resig we just got to learn about a clever technique applied by the Filament group in Boston called Progressive Enhancement with CSS support. The study rightfully claims that object detection to determine whether a user agent is capable of supporting a certain interface is not enough. You also need to make sure that Read the rest…

Posted by Chris Heilmann at 4:16 am
7 Comments

+----
1 rating from 2477 votes

Wednesday, March 5th, 2008

CSSJanus: simple tool for RTL

Category: CSS, Utility

Over on the Google Open Source blog I got to post about a new tool by Lindsey Simon that takes your CSS and spits out versions ready for the RTL world (or vice versa if you are a developer elsewhere that wants an English version….. which may be more common?). CSSJanus is CSS parser utility Read the rest…

Posted by Dion Almaer at 12:01 am
1 Comment

+++--
3.8 rating from 16 votes

Wednesday, February 27th, 2008

Rounded tabs with Dijit

Category: CSS, Dojo

Nikolai Onken has written a detailed post on rounded tabs and how to get them all nice and happy with Dijit. Although the example is focused on Dijit and tweaking the tab template: < View plain text > HTML <div waiRole="presentation" dojoAttachEvent=’onclick:onClick,onmouseenter:_onMouse,onmouseleave:_onMouse’> <div waiRole="presentation" class=’dijitTabInnerDiv’ dojoAttachPoint=’innerDiv’> <div waiRole="presentation" class=’dijitTabContent’ dojoAttachPoint=’tabContent’>           Read the rest…

Posted by Dion Almaer at 6:05 am
3 Comments

+++--
3.8 rating from 32 votes

Monday, February 25th, 2008

CSS Sprite Generator: Open Sourced and Adapted

Category: CSS, Performance

Ryan Breen has been tinkering with the CSS Sprite Generator that Ed Eliot and Stuart Colville recently open sourced. How did he tweak it? One of the first articles I wrote about CSS sprites covered the built-in support in GWT, and I focused on their clever trick of including an MD5 checksum of the sprite Read the rest…

Posted by Dion Almaer at 8:22 am
4 Comments

++++-
4.1 rating from 14 votes

Thursday, February 21st, 2008

Slickspeed Adds Dojo

Category: CSS, JavaScript, Performance

The MooTools folks have added Dojo 1.0.2 to the set of tests on their Slickspeed. It is actually quite cool of them to put up this test and compare other frameworks. I just ran it on Firefox beta 3 on the Mac and the final results (for what it is worth) were: Dojo 1.0.2: 145 Read the rest…

Posted by Dion Almaer at 7:29 am
6 Comments

+++--
3.8 rating from 37 votes

Thursday, February 14th, 2008

OnionML: Server Side JavaScript Layout Engine

Category: CSS, Framework, JavaScript

Marcello Bastéa-Forte has developed OnionML, a layout template language that uses server side JavaScript with Rhino and E4X on the back end. The high-level goal of the template engine is to be something with utility not unlike CSS, but for intended layout and composition. The actual functionality is similar to XSLT, but with the design Read the rest…

Posted by Dion Almaer at 6:27 am
1 Comment

+++--
3.7 rating from 32 votes

Wednesday, February 13th, 2008

Extending dojo.query()

Category: CSS, Dojo, JavaScript

Alex Russell has taken some time to share the path you take when you go the Dojo Way and “build with, not on”. He posted an example of how to extend dojo.query() which walks through the steps: Step 1: grok dojo.NodeList dojo.NodeList is the Array subclass which all dojo.query() calls return an instance of. Therefore, Read the rest…

Posted by Dion Almaer at 2:36 am
Comment here

+++--
3.5 rating from 19 votes

Monday, February 11th, 2008

Native CSS selectors with querySelector

Category: Browsers, CSS, WebKit

David Smith of WebKit posted about their native implementation of querySelector and querySelectorAll from the W3C Selectors API. Native CSS selectors in the browsers is going to be a huge boon for us and the Ajax libraries that will be able to use them. You can use the standard via: < View plain text > Read the rest…

Posted by Dion Almaer at 7:08 am
6 Comments

++++-
4 rating from 27 votes

Friday, February 8th, 2008

Hide an image in html?

Category: CSS

Erik Kastner created something a little bizarre at 2am (beer involved?). He built an image hider using the CSS3 ::selection pseudo-element. You mouse over the text and a hidden image reveals itself. Time for some silly hide and seek games!

Posted by Dion Almaer at 7:10 am
4 Comments

+++--
3.2 rating from 27 votes

Wednesday, January 30th, 2008

YUI Grid CSS and Grid Builder

Category: CSS, Utility, Yahoo!

Jeremy Zawodny of Yahoo! just found the YUI Grid Builder that does what you would imagine… gives you a tool to generate your CSS layout. Will Duff took that and made YahooPages which adds even more WYSIWYG fun.

Posted by Dion Almaer at 4:29 am
2 Comments

+++--
3.8 rating from 39 votes

Tuesday, January 22nd, 2008

Sub pixel fun with browsers

Category: Browsers, CSS

John Resig has been tinkering with the sub pixel problems in CSS and how browsers deal with bit of pixels: Something that jumped at me, recently, was a rendering dilemma that browsers have to encounter, and gracefully handle, on a day-by-day basis with little, to no, standardization. Take the following page for example. You have Read the rest…

Posted by Dion Almaer at 2:06 am
5 Comments

++++-
4 rating from 30 votes

Monday, January 21st, 2008

Full Page Zoom Is For Sissies

Category: CSS

Ryan Tomayko has a post titled Full Page Zoom Is For Sissies that delves into the fun of trying to build a website using purely em and relative sizing: About a year ago, I spent the better part of a day making this site’s layout entirely em based and set on a vertical baseline grid… Read the rest…

Posted by Dion Almaer at 12:24 am
4 Comments

++++-
4 rating from 24 votes

Monday, January 14th, 2008

Javascript CSS Selector Engine Timeline

Category: CSS, JavaScript

Paul Irish put together a bit of history in the form of the Javascript CSS selector engine timeline which shows us that “selector processing power has gone from Pinto power to a Mustang GT 500.”. 2003.03.25: document.getElementsBySelector() by Simon Willison (later used in behaviour.js) [source] 2005.08.19: CssQuery(): by Dean Edwards [source] 2005.08.22: jSelect (precursor to Read the rest…

Posted by Dion Almaer at 7:39 am
4 Comments

+++--
3.9 rating from 36 votes