Hack for Webkit

If you want to target Webkit only, use this in your CSS:

@media all and (-webkit-min-device-pixel-ratio: 1){
     selectors {
           properties: values;
     }
}

Put all your Webkit only properties and valus withing the @media at-rule block.

Defining Constants in JavaScript: Browser Issues

This blog is based off of http://www.hedgerwow.com/360/dhtml/js_constant.html.

A constant is defined as:

A variable whose value cannot change through assignment or be re-declared while the script is running

A constant is declared using the const keyword.

The scope of a constant is the same as the scope would have been had it not been declared as a constant (local within a function, global outside of a function, or as a closure.

Thru a simple example, Hedger shows that Opera does not respect constants.

If you define a constant, you should not be able to change the value of the constant in your script.

function hello() {};
  const hello = 'goodbye'; //should throw an error

function myfunction() {
  const hello= 'goodbye';
  var hello = 42; //should throw an error
  //statements
}

Hedger defines his constants using the define method.

Hiring a WebDev in Palo Alto

Looking for a CS grad with 1+ years experience, or a non-grad with 4+ years experience as a web developer  — a more junior position — to work on the front end with 3 senior level front end engineers on a Ruby on Rails mid-tier site. Cross browser trouble shooting is a very good skill to have.  Job is on-site in Palo Alto, CA. contact me at myfirstName at myLastName dot org.

Web Developer / UI Engineer

OVERVIEW:

We are looking for a brilliant User Interface engineer with strong front-end web development skills. Candidate has desire to have direct influence on the direction and quality of the leading travel search engine.

RESPONSIBILITIES:

Develop application features with a focus on the UI experience, contribute to interaction and visual design of user features, performance measurement and tuning, A/B testing. In addition the successful candidate will assist in the development and maintenance of frameworks for web-tier development,

EXPERIENCE (required):

• 2 years web development experience with at least 2 years experience at a high-traffic consumer web site
• Ability to do rapid prototyping of new features in parallel with design
• Passion for the development of high-quality web UI
• 2 years experience hand coding table-less XHTML, HTML, CSS, including browser differences & hacks
• 2 years experience with Photoshop, Fireworks, or other graphics programs
• 2 years experience debugging Internet Explorer and other browsers.
• 2 years plus experience working with and resolving cross-browser compatibility issues
• 1 year experience Object Oriented JavaScript
• hands-on experience doing widgets mash-ups, such as Google Maps, Facebook, OAuth, Flickr Photo Widget, or similar.
• Front-end optimization experience included search engine optimization, accessibility and perceived / actual download speed optimization.
• Ability to convert visual designs/wireframes into HTML
• Ability to shift gears quickly
• BS in CS with 1+ yr experience, AA in CS with 2+ yrs experience or other degree with 4+ yrs experience preferred.

EXPERIENCE (ideal):

• Hands-on experience with JSON and JavaScript support libraries such as jQuery, prototype, scriptaculous, YUI.
• Experience with mid-tier technologies: PHP, Ruby on Rails, Struts or other (not ASP.net)
• Design/Prototyping Tools: Photoshop/GIMP/Fireworks
• Debugging Tools: YSlow and Firebug/DragonFly/Developer Tools
• SQL, UNIX

New Browser Releases: Opera 10.6 and Firefox 4beta

Since I last wrote in this blog (the day Safari 5 was released), two more browser versions have been released. Opera 10.6 was released last week, with fabulous support for webforms, though still no support for the placeholder attribute.

Yesterday, Firefox 4 Beta was also released, in beta (duh!). They added a feedback button to enable easy feedback submisstion. Smart, since few will go out of their way to provide feedback, but they make it so easy that you can’t help but provide feedback if you find a quirk. I kind of wish Opera had that feature. And kind of wish Firefox didn’t.

Removing the Firefox Feedback Button

Removing the “Feedback” button is actually beyond easy. It’s simply an addon. And, since Firefox 4 beta is basically incompatible with all other addons, it’s the only one listed that you can disable.

To disable it, click on Tools > Add Ons. A new browser window entitled “Add-Ons Manager” will open with a list of all of your addons. The only one that is not disabled is the “Feedback 10rc1″ addon. Click on the “disable” button, and restart Firefox.

I thought that Firebug was going to be native in FF4, like Opera comes with DragonFly and Safari comes with Developer ToolBar, even Chrome and IE8 have an equivalent of Firebug, but Firefox 4 does not, and Firebug is not compatible. Because Firebug is not compatible with FF4 make sure to enable saving your current version of Firefox before downloading the new Beta.

While Firefox 4beta adds an HTML5 parser and full support for web video, audio, and drag & drop, there has been precious little improvement in Web Forms support. Similar to Safari 5, the beta release has removed some support from :link and :visited. In über cool fashion, it has added support for a non-spec CSS selector :-moz-any(), which basically allows you to say “pick any of these descendent selectors of this parent selector”, instead of having to write out the parent selector in front of every single of its descendants that you want to match separately separated by commas… that always gets long. Since we still have to write the longhad of the selectors for other browsers, unless this selector idea catches on and is added to the spec, it will be useless except for use as a hack to target Firefox 4.

Another added feature in FF4 beta is the CSS calc() value. Useful for when you want to define width of 100% on an element with padding, or when you want to ensure there is a fixed width gutter on a fluid layout, width: -moz-calc(25% – 15px); can help ensure that gutter.

By the way, why are you reading this blog? I’ve moved over to www.standardista.com. It’s prettier, more thorough, and even more interesting over there.

Opera

With Opera it’s almost easier to say what it doesn’t support, since they’re doing such a great job of supporting modern draft standards.

Opera supports all of the new input types except tel, color and search, but since they support pattern matching, you can enter your own pattern. Unfortunately the placeholder and multiples attributes are not yet supported. When placeholder is supported, the lack of support for tel since there is support for pattern may be almost a non-issue.

Definitely download Opera and take Dragonfly, their version of Firebug, for a spin. Not new to 10.6, but still very cool.

Safari 5 Link selector: bug or security feature?

Safari 5 came out today. I am still testing. Safari 5 does not support all CSS selectors. While webkit (the engine behind Safari) has been supporting all CSS selectors, including all proposed CSS3 selectors for a long time now, today’s release does not support a:link and a:visited. There is a grid of CSS3 Selectors and Browser support at my other blog, Standardista.com.

I’ll be testing further over the next few days, but since this one is a doozy if it is a bug, and undocumented (my Google skills are failing me at this hour), i wanted to let y’all know now instead of waiting for my full post. Does anyone know if this is a new security feature, or if it is a bug?

You can download safari.

UPDATE:

According to a somewhat hidden security file at Apple, http://support.apple.com/kb/HT4196, this seems like it is actually a security feature:

WebKit: Available for: Mac OS X v10.4.11, Mac OS X Server v10.4.11, Mac OS X v10.5.8, Mac OS X Server v10.5.8, Mac OS X v10.6.2 or later, Mac OS X Server v10.6.2 or later, Windows 7, Vista, XP SP2 or later
Impact: A maliciously crafted website may be able to determine which sites a user has visited

Description: A design issue exists in WebKit’s handling of the CSS :visited pseudo-class. A maliciously crafted website may be able to determine which sites a user has visited. This update limits the ability of web pages to style pages based on whether links are visited.

At the time of this writing, it was at the way bottom of the page.

Hack for Webkit: Filter for Chrome and Safari

To target only webkit, which includes Google and Safari, encompass all the CSS that you want to use just to target Webkit in the following @media block:

@media screen and (-webkit-min-device-pixel-ratio:0) {
     .myClass { background-color: #FF0000; }
     #myId {color: #0000FF;}
     p, a, li {text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);}
}

Put the above code anywhere in your CSS file. The other browsers will read the rest, but only webkit reads the -webkit-min-device-pixel-ratio of the declaration, and therefore only Chrome and Safari will abide by the rules in the CSS code block.

The important stuff to learn:

@media screen and (-webkit-min-device-pixel-ratio:0) {
     /* put webkit CSS here*/
}

JS Variable Scope, HTML5 Web Forms

I just wanted to point out 2 articles I wrote elsewhere that may be of interest to you.

JavaScript Variable Scope: Local and Global Variables

In writing JavaScript functions, variable functions can trip you up. A common error is overwriting a global variable because the variable in a function didn’t have local scope. If that last sentence didn’t make any sense, then this article is for you.

This article covers tips and tricks for understanding variable scope in JavaScript. Read more »

Community MX has over 3,400 articles on web development and design. check it out. They’re also looking for new writers if you’re is interested.

HTML5 Web Forms and Browser Support

HTML5 Web Form specifications are not yet complete, but some browsers are supporting many of the proposed features. I’ve been testing all of the new values in different browsers (want to send me an iPad so I can test, feel free … hint, hint). To see what browsers are supporting as of last week, read more ».
It’s still a work in progress, and i’ll be adding more details to the bottom until it’s complete.

Standardista.com is my new blog where I write about CSS3 and HTML5. There are a lot of excellent (if i do say so myself) browser support grids there. Dig in deep, there isn’t that much there, but what’s there is really thorough.

View Source has a Posse: SXSW

If you are going to be in Austin for SXSW this weekend, make sure to come to our panel discussion: View Source Has a Posse.

The “view source” functionality of browsers is near and dear to my heart, as it’s how I learned to code, it’s how I judge who to hire, and it’s how I help trouble shoot bugs and quirks when developers ask me for help.

Here’s the summary from the the interwebs:

View Source Has a Posse – http://my.sxsw.com/events/event/5005

“View source” is a feature of all modern browsers that few people use, and that more probably wouldn’t miss if it disappeared. Still, viewing other people’s source code has played an undeniable role in the Web’s development, spurring a culture of creativity and sharing, and cementing values of openness and transparency in developer practices.

However, as the Web becomes increasingly dedicated to social interaction and applications rather than static documents, the value of viewing machine-generated source code raises a critical question: will view source be relevant to the next generation of Web apps? And what might be lost if new Web applications refuse to include its functionality?

Panelists include Aza Raskin from Mozilla, Chris Wilson from Microsoft, Michael Lucaccini of Archetype, and Alex Russell of Dojo & Google, and ME!.
Questions addressed will include:

1. what is View Source?
2. how have web developers and designers use View Source?
3. what were the original intentions of the feature?
4. how has view source functionality changed with things like Firebug and Web Inspector?
5. what alternatives exist to support iterative hacking on other people’s code?
6. how might tools and communities like GitHub augment or replace View Source?
7. how important is view source to learning to program complex web applications?
8. UserStyles, UserScripts, JetPacks and similar end-user web customizations – will these kinds of innovations be stifled if View Source goes away?
9. how can view source functionality be added to other “non-web” software? How would it be different than open source software?
10. is there a larger point to be made about the relevance of open source in the social/cloud era of computing?

The panel is 3:30 on Saturday in room 12AB. I hope to see you there. Please do say ‘hi’.

CSS3 Border Properties, etc.

At this blog you’ll find my summary article on all the CSS3 properties, values and browser support. CSS3 has many different components, and I am digging into each category. I just posted CSS3 Border Properties & Browser Support tonight, and CSS Background Properties: possible values, default values, browser support and DOM last week…. but at my new blog.

I will continue to maintain this blog, but Standardista.com will hopefully be better organized, and less of an eyesore.

Here are some of the CSS3 articles you’ll find in my new online home:

CSS3 Border Properties & Browser Support

Border radius, border image and box-shadow are now supported in Firefox, Safari, Opera and Chrome. Take a look at all the border properties of CSS3 and how all the browsers handle all the values. Everything you could ever want to know about CSS3 border properties, values and browser support, in grid format. CSS3 Border Properties »

CSS Background Properties: possible values, default values, browser support and DOM

There are 8 attributes controlling background images, including those added in CSS3. This blog post goes over all the CSS2.1 and CSS3 background properties, values and browser support, how to target those properties via the DOM, with information on bugs you may find when implementing background properties

CSS3 Columns & Browser Support

Developers have been dividing their code, creating 3 <ul>s and floating each left, followed by a clear, to better use screen real estate. CSS3 solves this issue with the ‘Multi-column Layout Module’. We can now maximize the use of a large screen real-estate, by including limited-width columns of text placed side by side. Well, at least we can in non-IE browsers. Here is a grid of the CSS3 Multi-column Layout Module, all the properties, values and current browser support.

@font-face browser support & browser support

Up to now, web developers were limited in what typography they could use on a website to what the client had installed in their environments. Now that we have finally convinced designers to not include any fonts outside of georgia, helvetica, arial, times roman, and a handful of others because of the awfulness of text images, @font-face allows us to retrain designers to use unique fonts, only if they have the legal right to post those fonts on the web. This article explains how to do it, and what features are supported in the various browsers.

CSS3 Selectors & Browser Support

A list of all of the CSS3 Selectors (which includes all the CSS1 and CSS2.1 selectors), with a grid of every modern browser, and the support for each browser of each selector. Included at the bottom is a commentary on each browser and their quirks in handling a selector, if there are any.

CSS3 Properties, Values & Browser Support

CSS Properties Index

Below is every most CSS3 Properties, all the possible values for that property, and the support for each property value from grade-A browsers

This grid does not include animation, tranforms, grids, columns, layouts or templates. I have a separate post for CSS3 Background Properties and CSS3 border properties. Those are all coming soon. Sorry for the slow download, but this table is over 8000 lines worth of HTML. I am breaking this out into smaller, related sections. I’ll be posting those at my new site. And, yes, I know this table breaks the layout of the page. This whole blog theme is ugly, but some of the content hopefully makes this eyesore worth it The new site should be ready soon: and way prettier!

<th class="property" title="# values are a Mozilla extension and not supported by Safari/WebKit.
# Safari/WebKit supports only one value for all 4 corners. For different radii the long form properties must be used.
# Safari/WebKit doesn’t support the slash / notation. If two values are specified, an elliptical border is drawn on all 4 corners.”>border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius

Property	CSS 2.1	Default Value	ie6	ie7	ie7comp	ie8	FF3	Saf	OP	Notes
Property	CSS 2.1	Default Value	ie6	ie7	ie7comp	ie8	FF3	Saf	OP
azimuth	Audio	center	aural
angle (270deg)
left-side | far-left | left | center-left | center | center-right | right | far-right | right-side
behind | leftwards | rightwards
inherit
background	CSS2.1/CSS3	body { background-color: transparent; background-position: 0% 0%; background-size: auto auto; background-repeat: repeat repeat; background-clip: border-box; background-origin: padding-box; background-attachment: scroll; background-image: none; }	√	√	√	√	√	√	√	see individual background properties below
background	CSS3
background-attachment	CSS2.1		Δ	Δ	Δ	√	√	√	√
scroll	default		Δ	Δ	Δ	√	√	√	√
fixed			Χ	Χ	Χ	√	√	√	√
inherit			√	√	√	√	√	√	√
local	not in spec		Δ	Δ	Δ	Χ	Χ	Χ	Χ
background-break	not in spec	NO LONGER IN CSS3 Spec	Χ	Χ	Χ	Χ
background-clip	CSS3						-moz-	-webkit		Webkit uses both -webkit-border and -webkit-border-box. syntax may change.
border-box	default						border
padding-box							padding
content-box	not in spec						content
background-color	CSS2.1/CSS3		√	√	√	√	√	√	√
rgb()			Δ	Δ	√	√	√	√	√
#FFFFFF			√	√	√	√	√	√	√
colorName			Δ	√	√	√	√	√	√
transparent	default		Δ	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
rgba()	CSS3		filter				√	√	Χ
background-image	CSS2.1	not inherited	√	√	√	√	√	√	√
inherit			Δ	Δ	Δ	√	√	√	√
none	default		√	√	√	√	√	√	√
url			√	√	√	√	√	√	√
url, url	CSS3		Χ	Χ	Χ	Χ	Χ	√	Χ
background-origin	CSS3						-moz-	-webkit		mozilla and webkit ahve support, but use differnt value terms
border-box							border	border
padding-box	default						padding	padding
content-box							content	content
background-position	CSS2.1	0% 0%	√	√	√	√	√	√	√
left | top | right | bottom | center			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
px			√	√	√	√	√	√	√
%			√	√	√	√	√	√	√
background-position-x	CSS3		√	√	√	√	Χ	√	Χ
backgroun-position-y	CSS3		√	√	√	√	Χ	√	Χ
background-repeat	CSS2.1		√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
repeat	default		√	√	√	√	√	√	√
no-repeat			√	√	√	√	√	√	√
repeat-x / repeat-y			√	√	√	√	√	√	√
background-size							-moz- 3.6	-webkit 3	-o-9.5
auto – actual size of image	default
cover – scale to cover entire box
contain – scale to fit inside box
widthLength heightLength
block-progression	CSS3	inherited
tb	default
lr
rl
border border-bottom | border-left | border-right | border-top	CSS2.1	medium none (current color)	Δ	Δ	Δ	√	√	√	√	border-width || border-style || border-color
border-color border-bottom-color | border-left-color | border-right-color | border-top-color	CSS2.1	(current color)	√	√	√	√	√	√	√
rgb()			Δ	Δ	Δ	√	√	√	√
#CCCCCC			√	√	√	√	√	√	√
colorName			Δ	√	√	√	√	√	√
transparent			Χ	Δ	Δ	√	√	√	√
inherit			√	√	√	√	√	√	√
rgba()			√	√	√	√	Δ	Δ	√
border-style border-bottom-style border-left-style border-right-style | border-top-style	CSS2.1		√	√	√	√	√	√	√
dashed			√	√	√	√	√	√	√
dotted			√	√	√	√	√	√	√
double			√	√	√	√	√	√	√
groove			√	√	√	√	√	Δ	√
hidden			Χ	Χ	Χ	√	√	√	√
inset			√	√	√	√	√	Δ	√
none	default		√	√	√	√	√	√	√
outset			Δ	Δ	Δ	√	√	Δ	√
ridge			√	√	√	√	√	Δ	√
solid			√	√	√	√	√	√	√
border-width border-bottom-width border-left-width border-right-width border-top-width	CSS2.1	medium	Δ	Δ	Δ	√	√	√	√
thin			√	√	√	√	√	√	√
medium			√	√	√	√	√	√	√
thick			√	√	√	√	√	√	√
length (3px)			√	√	√	√	√	√	√
!!!!!border-break	CSS3
border-width
border-style
color
close
border-collapse	CSS2.1		Δ	Δ	Δ	√	√	√	√	'table' and 'inline-table' elements
collapse			Δ	Δ	Δ	√	√	√	√
separate	default		√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
border-image	CSS3	shorthand					-moz-
image							3.5
border-image-outset	CSS3						-moz-
length {1,4}
border-image-repeat	CSS3						-moz-
stretch	default
repeat
round
space
border-image-slice	CSS3						-moz-
length{1,4}	default=100%
fill
border-image-source	CSS3						-moz-
url()
none	default
border-image-width	CSS3						-moz-
length ({1,4}
auto
CSS3	Note: Firefox sytax is wrong: -moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomright, -moz-border-radius-bottomleft					-moz-	-webkit-	-o-	values before slash = horizontal radius, values after the slash = vertical radius.
length
box-shadow	CSS3	currently removed from spec. Will likely come back					-moz-	-webkit-
inset lngth lngth lngth color
lngth lngth lngth color
none
(mulitple shadows)							3.5	4.0
border-spacing	CSS2.1	0	Χ	Χ	Χ	√	√	√	√	'table' and 'inline-table' elements. Used with {border-collapse: separate;}
length			Χ	Χ	Χ	√	√	√	√
length length			Χ	Χ	Χ	√	√	√	√
inherit			Χ	Χ	Χ	√	√	√	√
bottom	CSS2.1		Δ	√	√	√	√	√	√
length			Δ	√	√	√	√	√	√
percent			Δ	√	√	√	√	√	√
auto			Δ	√	√	√	√	√	√
box-decoration-break	CSS3	not inherited								handling of border when a box is broken by a page, col break, etc.
clone
slice	default
caption-side	CSS2.1		Χ	Χ	Χ	√	√	√	√
top	default		√	√	√	√	√	√	√
bottom			Χ	Χ	Χ	√	√	√	√
left / right	not in spec		Χ	Χ	Χ	Δ	√	Χ	Χ
clear	CSS2.1		√	√	√	√	√	√	√
both			√	√	√	√	√	√	√
left			√	√	√	√	√	√	√
right			√	√	√	√	√	√	√
none	default		√	√	√	√	√	√	√
clip	CSS2.1		Χ	Χ	Χ	√	√	√	√	on absolutely positioned elements
rect(T, R, B, L)			Χ	Χ	Χ	√	√	√	√
auto	default		√	√	√	√	√	√	√
inherit			Χ	Χ	Χ	√	√	√	√
color	CSS2.1	depends on element and browser	√	√	√	√	√	√	√
rgb()			Δ	Δ	√	√	√	√	√
#CCCCCC			√	√	√	√	√	√	√
colorName			√	√	√	√	√	√	√
transparent			Χ	Χ	Χ	Χ	√	√	Χ
inherit			√	√	√	√	√	√	√
rgba()			Χ	Χ	Δ	Δ	Δ	Δ	Χ
content :before & :after	CSS2.1		Χ	Χ	Χ	√	√	√	√
none			Χ	Χ	Χ	√	√	Χ	√
normal	default		Χ	Χ	Χ	√	√	Χ	Χ
url()			Χ	Χ	Χ	√	√	√	√
string			Χ	Χ	Χ	√	√	√	√
open-quote / close-quote			Χ	Χ	Χ	√	√	Χ	Δ
no-open-quote / no-close-quote			Χ	Χ	Χ	√	√	Χ	√
attr(x)			Χ	Χ	Χ	√	√	√	√
counter			Χ	Χ	Χ	√	√	√	√
inherit			Χ	Χ	Χ	√	√	√	√
counter-increment	CSS2.1		Χ	Χ	Χ	√	√	√	√
counterName int			Χ	Χ	Χ	√	√	√	√
none	default		Χ	Χ	Χ	√	√	√	√
inherit			Χ	Χ	Χ	√	√	√	√
counter-reset	CSS2.1		Χ	Χ	Χ	√	√	√	√
counterName int			Χ	Χ	Χ	√	√	√	√
none	default		Χ	Χ	Χ	√	√	√	√
inherit			Χ	Χ	Χ	√	√	√	√
cue cue-after cue-before	CSS2.1		aural
url(x.wav)
none	default
inherit
cursor	CSS2.1		√	√	√	√	√	√	√
url(x.cur)			√	√	√	√	Χ	√	Χ
auto	default		√	√	√	√	√	√	√
crosshair			√	√	√	√	√	√	√
default			√	√	√	√	√	√	√
pointer			√	√	√	√	√	√	√
move			√	√	√	√	Δ	√	√
e-resize			√	√	√	√	√	√	√
ne-resize			√	√	√	√	√	√	√
nw-resize			√	√	√	√	√	√	√
n-resize			√	√	√	√	√	√	√
se-resize			√	√	√	√	√	√	√
sw-resize			√	√	√	√	√	√	√
s-resize			√	√	√	√	√	√	√
w-resize			√	√	√	√	√	√	√
text			√	√	√	√	√	√	√
wait			√	√	√	√	√	√	√
progress			√	√	√	√	√	√	√
help			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
direction	CSS2.1/CSS3	inherited				√
ltr	default		√	√	√	√	√	√	√
rtl
inherit			√	√	√	√	√	√	√
display	CSS2.1		√	√	√	√	√	√	√
inline			√	√	√	√	√	√	√
block			√	√	√	√	√	√	√
list-item			√	√	√	√	√	√	√
run-in			Δ	Δ	Δ	√			√
inline-block			Δ	Δ	Δ	√	√	√	√
table			Δ	Δ	Δ	√	√	√	√
inline-table							3.0
table-row-group
table-header-group
table-footer-group
table-row			Δ	Δ	Δ	√	√		√
table-column-group			Δ	Δ	Δ	√	√		√
table-row			Δ	Δ	Δ	√	√		√
table-column			Δ	Δ	Δ	√	√		√
table-cell			Δ	Δ	Δ	√	√		√
table-caption			Δ	Δ	Δ	√	√		√
none			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
ruby	CSS3
ruby-base	CSS3
ruby-text	CSS3
ruby-base-group	CSS3
ruby-text-group	CSS3
compact	CSS2.0/CSS3
elevation	CSS2.1	level	aural
angle (270deg)
below | level | above | higher | lower
inherit
empty-cells	CSS2.1	show	Χ	Χ	Χ	√	√	√	√	sets whether or not to show empty cells in a table when "separated
show			Χ	Χ	Χ	√	√	√	√	Borders are drawn around empty cells
hide	Default		Χ	Χ	Χ	√	√	√	√	No borders are drawn around empty cells
inherit			Χ	Χ	Χ	√	√	√	√
float	CSS2.1	none	√	√	√	√	√	√	√
left			√	√	√	√	√	√	√
right			√	√	√	√	√	√	√
none			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
font	CSS2.1	depends on element and browser				√
fStyle fVariant fWeight fSize/lineHeight fFamily
caption
icon
menu
message-box
small-caption
status-bar
inherit
font-effect	CSS3	no longer in spec
font-emphasize	CSS3	no longer in spec
font-family	CSS2.1	depends on element and browser				√
font-1, font-2, generic
singleFontFamily
inherit
font-size	CSS2.1	medium	√	√	√	√	√	√	√
xx-small | x-small | small | medium | large | x-large | xx-large			√	√	√	√	√	√	√
larger | smaller			√	√	√	√	√	√	√
length (12px)			√	√	√	√	√	√	√
percent (108%)			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
font-size-adjust	CSS2/CSS3	sandbox					√
none	default						√	√	√
inherit							√
length							√
font-stretch	CSS3	sandbox
normal	default		√	√	√	√	√	√	√
wider
narrower
ultra-condensed / ultra-expanded
extra-condensed/ extra-expanded
condensed / expanded
semi-condensed / semi-expanded
inherit
font-style	CSS2.1	normal	√	√	√	√	√	√	√
normal			√	√	√	√	√	√	√
italic			Δ	Δ	Δ	Δ	Δ	Δ	Δ
oblique			Δ	Δ	Δ	Δ	Δ	Δ	Δ
inherit			√	√	√	√	√	√	√
font-variant	CSS2.1	normal	√	√	√	√	√	√	√
normal			√	√	√	√	√	√	√
small-caps			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
font-weight	CSS2.1	normal	√	√	√	√	√	√	√
normal			√	√	√	√	√	√	√
bold			√	√	√	√	√	√	√
bolder							√	√
lighter							√	√
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900		couldn’t fully test because i don’t have "light" fonts					√	√
inherit			√	√	√	√	√	√	√
hanging-punctuation	CSS3
none
start | end
end-edge
height	CSS2.1	auto	Δ			√	√	√	√
length / percent			Δ			√	√	√	√
auto			Δ			√	√	√	√
inherit			Δ			√	√	√	√
left	CSS2.1	auto	√	√	√	√	√	√	√
length / percent			√	√	√	√	√	√	√
auto			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
letter-spacing	CSS2.1	inherited	√	√	√	√	√	√	√
length (3px)			√	√	√	√	√	√	√
normal	default		√	√	Δ	√	√	√	√
inherit			√	√	√	√	√	√	√
line-height	CSS2.1	normal	√	√	√	√	√	√	√
normal	default		√	√	√	√	√	√	√
number (2)			√	√	√	√	√	√	√
length (3px)			√	√	√	√	√	√	√
percent			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
line-stacking	CSS3	shorthand
strategy ruby shift (see below)
line-stacking-strategy	CSS3
inline-line-height	default
block-line-height
max-height
grid-height
line-stacking-ruby	CSS3	inherited
exclude-ruby	default
include-ruby
line-stacking-shift	CSS3	inherited
consider-shifts	default
disregard-shifts
list-style	CSS2.1	depending on individual properties	√	√	√	√	√	√	√
type position image			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
list-style-image	CSS2.1	inherited				√
url()
none	default
inherit
list-style-position	CSS2.1	outside				√
inside
outside
inherit
list-style-type	CSS2.1	disc sandbox	√	√	√	√	√	√	√
disc			√	√	√	√	√	√	√
circle			√	√	√	√	√	√	√
square			√	√	√	√	√	√	√
decimal			√	√	√	√	√	√	√
decimal-leading-zero			Χ	Χ	Χ	√	√	√	√
lower-roman			√	√	√	√	√	√	√
upper-roman			√	√	√	√	√	√	√
lower-greek			Χ	Χ	Χ	√	√	√	√
lower-latin			Χ	Χ	Χ	√	√	√	√
upper-latin			Χ	Χ	Χ	√	√	√	√
armenian			Χ	Χ	Χ	Δ	Δ	Δ	Δ
georgian			Χ	Χ	Χ	Δ	Δ	Δ	Δ
lower-alpha			√	√	√	√	√	√	√
upper-alpha			√	√	√	√	√	√	√
none			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
asterisks	CSS3
box	CSS3
check	CSS3
diamond	CSS3
footnotes	CSS3
hyphen	CSS3
cjk-ideographic	CSS3
hiragana	CSS3
katakana	CSS3
hiragana-iroha	CSS3
katakana-iroha	CSS3
margin margin-bottom margin-left margin-right margin-top	CSS2.1	depends on element and browser	Δ	Δ	Δ	√	√	√	√
length (3px)			Δ	Δ	Δ	√	√	√	√
inherit			Δ	Δ	Δ	√	√	√	√
marquee-direction	CSS3
forward
reverse
marquee-play-count	CSS3
infinite
number
marquee-speed	CSS3
slow
normal
fast
marquee-style	CSS3
scroll
slide
alternate
max-height	CSS2.1	none	Χ			√	√	√	√
length / percent			Χ			√	√	√	√
none			Χ			√	√	√	√
inherit			Χ			√	√	√	√
max-width	CSS2.1	none	Χ			√	√	√	√
length / percent			Χ			√	√	√	√
none			Χ			√	√	√	√
inherit			Χ			√	√	√	√
min-height	CSS2.1	0	Χ			√	√	√	√
length / percent			Χ			√	√	√	√
inherit			Χ			√	√	√	√
min-width	CSS2.1	0	Χ			√	√	√	√
length / percent			Χ			√	√	√	√
inherit			Χ			√	√	√	√
opacity			IE has proprietary filter to simulate effect: filter: alpha(opacity=xx)						10
inherit									10
(number)									10
orphans	CSS2.1	2	Χ	Χ	Χ	√	Χ	Χ	√
integer			Χ	Χ	Χ	√	Χ	Χ	√
inherit			Χ	Χ	Χ	√	Χ	Χ	√
outline	CSS2.1	depending on individual properties	Χ	Χ	Χ	√	√	√	√	see individual properties below
color style width			Χ	Χ	Χ	√	√	√	√
none			Χ	Χ	Χ	√	√	√	√
inherit			Χ	Χ	Χ	√	√	√	√
outline-color	CSS2.1	invert	Χ	Χ	Χ	√	√	√	√
rgb / #fff / colorName			Χ	Χ	Χ
invert			Χ	Χ	Χ
inherit			Χ	Χ	Χ
outline-offset	CSS3
inherit
(length)
outline-style	CSS2.1	none	Χ	Χ	Χ	√	√	√	√
dashed			Χ	Χ	Χ	√	√	√	√
dotted			Χ	Χ	Χ	√	√	√	√
double			Χ	Χ	Χ	√	√	√	√
groove			Χ	Χ	Χ	√	√	√	√
hidden			Χ	Χ	Χ	√	√	√	√
inset			Χ	Χ	Χ	√	√	√	√
none			Χ	Χ	Χ	√	√	√	√
outset			Χ	Χ	Χ	√	√	√	√
ridge			Χ	Χ	Χ	√	√	√	√
solid			Χ	Χ	Χ	√	√	√	√
inherit			Χ	Χ	Χ	√	√	√	√
outline-width	CSS2.1	medium	Χ	Χ	Χ	√	√	√	√
thin			Χ	Χ	Χ	√	√	√	√
medium			Χ	Χ	Χ	√	√	√	√
thick			Χ	Χ	Χ	√	√	√	√
length (3px)			Χ	Χ	Χ	√	√	√	√
inherit			Χ	Χ	Χ	√	√	√	√
overflow	CSS2.1	depending on individual properties	√	√	√	√	√	√	√
visible			Δ	√	√	√	√	√	√
hidden			√	√	√	√	√	√	√
scroll			√	√	√	√	√	√	√
auto			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
no-display	CSS3	sandbox
no-content	CSS3	sandbox
overflow-style	CSS3
auto
marquee-line
marquee-block	CSS3
overflow-x	CSS3		-ms-	-ms-	-ms-
overflow-y	CSS3		-ms-	-ms-	-ms-
padding padding-bottom padding-left padding-right padding-top	CSS2.1	depends on element and browser	Δ	Δ	Δ	√	√	√	√
length (3px)			Δ	Δ	Δ	√	√	√	√
inherit			√	√	√	√	√	√	√
page	2.0	auto
identifier
auto
page-break-after	CSS2.1	auto	√	√	√	√	√	√	√	not inherited
always			√	√	√	√	√	√	√	force a page break after the element
auto										page break where it would normally break
left										force page breaks so that next page is a left page
right										force page breaks so that next page is a right page
avoid										Avoid a page break after the element
page-break-before	CSS2.1	auto	√	√	√	√	√	√	√	not inherited
always			√	√	√	√	√	√	√	force a page break after the element
auto										page break where it would normally break
left										force page breaks so that next page is a left page
right										force page breaks so that next page is a right page
avoid										Avoid a page break after the element
page-break-inside	CSS2.1	auto								not inherited
avoid										Avoid a page break inside the element
auto										page break where it would normally break
pause	CSS2.1	implementation dependent	aural							Shorthand for pause-before pause after
time (in ms)
%
pause-after	CSS2.1	implementation dependent
time (in ms)										time in milliseconds
%										pause the % of time it would take to say a word (>100% ok)
pause-before	CSS2.1	implementation dependent
time (in ms)
%
pitch	CSS2.1	medium
Hz / kHz
x-low | low | medium | high | x-high
pitch-range	CSS2.1	50
0 or more
play-during	CSS2.1	auto
url(x.wav)
url(x.wav) mix
url(x.wav) repeat
auto
none
position	CSS2.1	static	√	√	√	√	√	√	√
absolute			√	√	√	√	√	√	√
fixed			Χ	Δ	Δ	√	√	Δ	√
relative			Δ	Δ	Δ	√	√	√	√
static			√	√	√	√	√	√	√
punctuation-trim	CSS3	inherited
none	default
start | end
adjacent
quotes	CSS2.1	implementation dependent	Χ	Χ	Χ	√	3.5		√
string (‘”’ ‘“’ "’" "‘")			Χ	Χ	Χ
none			Χ	Χ	Χ
inherit			Χ	Χ	Χ
richness	CSS2.1	50	aural
number (50)
inherit
right	CSS2.1	auto	Δ	√	√	√	√	√	√
length / percent			Δ	√	√	√	√	√	√
auto			Δ	√	√	√	√	√	√
inherit			Δ	√	√	√	√	√	√
size	2.0	auto
length (8.5in 11in)
portrait / landscape
auto
speak	CSS2.1	normal	aural
normal
none
spell-out
inherit
speak-header	CSS2.1	once
once
always
inherit
speak-numeral	CSS2.1	continuous
digits
continuous
inherit
speak-punctuation	CSS2.1	none
code
none
inherit
speech-rate	CSS2.1	medium
number
x-slow | slow | medium | fast | x-fast | faster | slower
inherit
stress	CSS2.1	50
number
inherit
table-layout	CSS2.1	auto	√	√	√	√	√	√	√7
auto			√	√	√	√	√	√	√
fixed			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
text-align	CSS2.1	start	√	√	√	√	√	√	√
left			√	√	√	√	√	√	√
right			√	√	√	√	√	√	√
center			√	√	√	√	√	√	√
justify			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
start | end	CSS3						3.6
(char)
text-align-last	CSS3		-ms-	-ms-	-ms-
start | end
left | right | center
justify
text-decoration	CSS2.1	none	√	√	√	√	√	√	√
none			√	√	√	√	√	√	√
underline			√	√	√	√	√	√	√
overline			√	√	√	√	√	√	√
line-through			√	√	√	√	√	√	√
blink			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
text-emphasis	CSS3	inherited
none	default		√	√	√	√	√	√	√
accent | dot | circle | disc
before | after
text-height	CSS3
auto
text-size
font-size
max-size
text-indent	CSS2.1	inherited	√	√	√	√	√	√	√
length / percent	default = 0		√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
hanging	CSS3
text-justify	CSS3		-ms-	-ms-	-ms-	-ms-
auto
inter-word
inter-ideograph | inter-cluster
distribute
kashida | tibetan
text-outline	CSS3	inherited
none	default
color
length
text-overflow	CSS3.X	not in the spec yet	-ms-	-ms-	-ms-	-ms-
string | clip | ellipses
text-shadow	2.0/3	inherited	Χ	Χ	Χ	Χ	√	√	√	Not in the 2.1 spec
color leftOffset topOffset blurRadius	2.0/3		Χ	Χ	Χ	Χ	√	√-	√	text-shadow sandbox
multiple shadows	CSS3		Χ	Χ	Χ	Χ	√	√-	10
none	default
text-transform	CSS2.1	none	√	√	√	√	√	√	√	text-transform standbox
capitalize			√	√	√	√	√	√	√
uppercase			√	√	√	√	√	√	√
lowercase			√	√	√	√	√	√	√
none			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
text-wrap	CSS3
normal			√	√	√	√	√	√	√
unrestricted
none
suppress
top	CSS2.1	auto	√	√	√	√	√	√	√
length / percent			√	√	√	√	√	√	√
auto			√	√	√	√	√	√	√
inherit			√	√	√	√	√	√	√
unicode-bidi	CSS2.1	normal	√	√	√	√
normal			√	√	√	√	√	√	√
embed			√	√	√	√
bidi-override			√	√	√	√
inherit
vertical-align	CSS2.1/CSS3	baseline	√	√	√	√	√	√	√	inline-level and table-cell elements only
baseline			Χ	√;	√	√	Χ	Δ	√
sub			Δ	Δ	Δ	√	√	√	√
super			Δ	Δ	Δ	√	√	√	√
top			√	√	√	√	√	√	√
text-top			√	√	√	√	√	√	√
middle			Δ	√	√	Δ	√	√	√
bottom			√	√	√	√	√	√	√
text-bottom			Δ	Δ	Δ	√	√	√	Δ
percent			Δ	Δ	Δ	√	√	√	√
length (3px)			Δ	Δ	Δ	√	√	√	√
inherit			√	√	√	√	√	√	√
auto
central
use-script	CSS3
visibility	CSS2.1	visible	√	√	√	√	√	√	√
visible			√	√	√	√	√	√	√
hidden			Δ	Δ	Δ	√	√	√	√
collapse			Χ	Χ	Χ	√	√	Δ	Δ	collapse in tables, hidden elsewhere
inherit			√	√	√	√	√	√	√
voice-family	CSS2.1	implementation dependent	aural
specificVoice, genericVoice
inherit
volume	CSS2.1	medium
number / percent
silent | x-soft | soft | medium | loud | x-loud
inherit
white-space	CSS2.1	normal	√	√	√	√	√	√	√
normal	test		Δ	Δ	Δ	√	√	√	√
pre	test		√	√	√	√	√	√	√
nowrap			√	√	√	√	√	√	√
pre-wrap			Χ	Χ	Χ	√	√	√	√
pre-line			Χ	Χ	Χ	√	Χ	√	√
inherit			√	√	√	√	√	√	√
white-space-collapse	CSS3
preserve
collapse
preserve-breaks
discard
widows	CSS2.1	2	Χ	Χ	Χ	√	Χ	Χ	√
integer			Χ	Χ	Χ	√	Χ	Χ	√
inherit			Χ	Χ	Χ	√	Χ	Χ	√
width	CSS2.1	auto	Δ	Δ	Δ	√	√	√	√
length / percent			Δ	Δ	Δ	√	√	√	√
auto			Δ	Δ	Δ	√	√	√	√
inherit			Δ	Δ	Δ	√	√	√	√
word-break	CSS3		-ms-	-ms-	-ms-
normal			√	√	√	√	√	√	√
keep-all
loose
break-strict
break-all
word-spacing	CSS2.1	inherited	√	√	√	√	√	√	√
length (3px)			Δ	Δ	Δ	√	√	√	√
normal	default		√	√	√	√	√	√	√
word-wrap	CSS3		-ms-	-ms-	-ms-		3.5
normal	default		√	√	√	√	√	√	√
break-word
writing-mode		Shorthand for direction and block progression								IE8 also supports bottom to top modes
lr-tb
rl-tb
tb-rl
tb-lr
z-index	CSS2.1	auto	Δ	Δ	Δ	√	√	√	√	applies to positioned elements
integer (3)			Δ	Δ	Δ	√	√	√	√
auto			√	√	√	√	√	√	√

 

Notes

• Level of support for property is based on CSS2.1. So, if a browser supports all of CSS2.1 but not CSS3, they will get be listed as supporting the property, unless it’s a purely CSS3 property. If there is a browser specific prefix to make the CSS3 work, it passes as "almost good."
• Browsers include:
  (if it passed originally in older browser, i did not retest)
  • IE6
  • IE7
  • IE7 compatibility mode
  • IE8
  • Firefox 3, 3.5, 3.6
  • Safari 3.2 and 4 beta
  • Opera 9.64 and 10
• There are a lot of hidden title attributes in this page. When you hover over the deltas and underlined table cells, in standards compliant browsers, informaiton on how the browsers fails to comply with standards should be displayed.
• This is still a work in progress, but it’s pretty far along, so I am posting. It will be updated soon and often until done… then I’ll remove this bullet point.

Key

Haven’t run tests yet	Fails	Some Support	Almost Compliant	Compliant	Aural (will not support)	Print
will test soon		may add links to tests	may add link to tests		will unlikely be supporting	will add support soon

.cssproperty th {background-color:#CCCCCC;}
.cssproperty td {background-color: #dedede; position:relative;max-width: 150px;}
.cssproperty td.good {background-color:#339900;}
.cssproperty td.almostgood {background-color:#00CC66;}
.cssproperty td.bad {background-color:#CC0000;}
.cssproperty td.iffy {background-color:#FFFF66;}
.cssproperty td.aural {background-color:#B8CBD8;}
.cssproperty td.print {background-color:#DBE5BC;}
.cssproperty td[title]:hover:after {
content:attr(title);
position:absolute;
background-color:#CCCCCC;
border:1px solid #999;
padding:5px;
display:block;
width:50px;
top: 0;
left:0;
}
th.property {text-align:left;}
th.value {padding-left: 10px; text-align:left;}
.cssproperty code {background-color:transparent;}
.cssproperty tbody { overflow-x: none; overflow-y: auto;}
.cssproperty th.property {border: 1px solid #aaa; border-width: 1px 0; background-color: #bbb; text-align:left;}
td[title] {border-bottom: 1px solid #3300FF;}