Stop SOPA

On January 18, 2012, to display opposition to SOPA, the internet killing so-called Stop Online Piracy Act, this blog will be temporarily shut down.

If you would like to show your opposition to SOPA and PIPA, I created a small JavaScript snippet that you can include on your web pages (I included it in the footer of this blog for example). When users visit your site on January 18th, client side, the browser will hide the content and display the message “Stop SOPA”.

You can fork the code here: https://github.com/estelle/StopSOPA or read more about it at Standardist: Stop SOPA

Posted in JavaScript, Web Development | Tagged | Leave a comment

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.

Posted in Browsers, CSS (including hacks), Web Development | 2 Comments

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.

Posted in Browsers, CSS (including hacks) | 16 Comments

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*/
}


Posted in Browsers, CSS (including hacks) | 5 Comments

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.


Posted in Web Development | 2 Comments

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 Possehttp://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’.

Posted in Browsers | Tagged | Leave a comment

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 »

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.


Posted in CSS (including hacks) | Leave a comment

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!

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                    
border-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius
border-top-left-radius
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
Posted in Browsers, CSS (including hacks), Web Development | 4 Comments

CSS3 Columns & Browser Support

I am busy working away at a grid of all the CSS3 properties. But, as I test them, I figure I would share. Here is the first set: the column properties.

I have a grid of all of the CSS3 properties, values and browser support that you may want to check out as well.

Property Inherited? Default Value ie6 ie7 ie7comp ie8 FF
3.6
Saf
4
Chrome OP
10
Notes
Property CSS 2.1 Default Value ie6 ie7 ie7comp ie8 FF3 Saf   OP  
COLUMNS                      
column-count no           -moz- -webkit -webkit    
auto default           -moz- -webkit- -webkit-    
(integer) sandbox           -moz-        
column-fill no                    
auto sandbox                    
balance default           -moz- -webkit -webkit    
column-gap – gap between columns no           -moz- -webkit -webkit    
normal default           -moz- -webkit -webkit-    
(positive length) sandbox           -moz-        
column-rule no           -moz- -webkit -webkit    
column width/style/color (see below) sandbox           -moz- -webkit- -webkit-    
column-rule-color no           -moz-        
(rgb or #color)             -moz- -webkit -webkit    
(rgba color) sandbox           -moz- -webkit- -webkit-    
column-rule-style no           -moz-        
(see border style) sandbox           -moz- -webkit -webkit    
none             -moz- -webkit- -webkit-    
column-rule-width no           -moz- -webkit -webkit-    
thin | medium | thick sandbox           -moz- -webkit -webkit    
(length)             -moz- -webkit- -webkit-    
columns (shorthand) no           -moz- -webkit -webkit    
length for column-width and/or int for column-count             -moz- -webkit- -webkit-    
omitted value set to initial value initial values           -moz-        
column-span CSS3                    
1 default                    
all sandbox                    
column-width no           -moz- -webkit -webkit    
(length) sandbox           -moz- -webkit- -webkit-    
auto default           -moz-        

Note that the CSS3 specifications are still in draft mode. Note the -webkit- and -moz- in the cells. Until this is supported, code like this:

-moz-column-count:3; /* for mozilla */
-webkit-column-count:3;  /* for webkit (Safari and Google) */
-o-column-count:3;  /* for opera, likely, when supported */
column-count:3; /* for all and future proofing */
Posted in CSS (including hacks) | 1 Comment

@font-face Browser Support & Tutorial

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.


What is @font-face

Generally, we’ve been limited to using the fonts pre-installed on MS Windows, Mac and Linux OSs. Increasing support of the CSS3 @font-face allows us to load a font onto our servers, link to and name that font in our CSS, and then use that font we’ve imported as if it were a native font in the client’s environment. With @font-face, we can worry less about what font our users have installed, and make our sites better match the intentions of our designers. @font-face enables you to provide your own font(s), @font-face eliminates the need to depend on the limited number of fonts users have installed on their computers

Browser Support for @font-face

CSS2 introduced @font-face. CSS2.1 killed it. CSS3 is reintroducing it. Why do you need to know the history? Because, it means there is actually a feature of CSS3 that internet explorer supports, albeit, differently than all other supporting browsers.

Because I am browser support table happy, here is the @font-face browser support table:

CSS Property IE6 IE7 IE8 Safari iPhone Chrome Firefox Opera
@font-face       3.2   4.0.249.78 3.5 10
format EOT EOT EOT TTF/OTF 3.1 supports SVG TTF/OTF support added 1/25/10
SVG supported by default
TTF/OTF TTF/OTF

* SVG is supported, but it’s a larger file size

Google Chrome and @font-face:

Google Chrome actually does support @font-face, but it was turned off by default until version 4.0.249.78 released on 1/25/20. Chrome has supporte SVG fonts for a while now.

While developers have been able to turn on @font-face support in Chrome in their own environment, only Chrome users who have updated to the January 25, 2010 release have it on by default. Google chrome users tend to be quick at updating, but stats don’t indicate the version number, so as of right now you can’t assume that Chrome has @font-face turned ON as the default settings for most users. Like with all site enhancement features, feel free to include fonts of type TTF/OTF, but make sure to pick a font backup that degrades nicely.

Note: Digging deeper, I found Becoming a font embedding master which both explains a link on where you can convert TTF2EOT so you can display similarly on IE than on good browsers (yeah, I said it) and exporting to SVG for font support on iPhone 3.1, Chrome 2 & 3, and 4 less than 4.0.249.78, and Opera 9 (your SVG font will work in Opera 10 and future versions of FF, Chrome, iPhone and Safari as well). Also check out FontSquirrel to convert your font files to differing formats (EOT, SVG, WOFF) for greater browser support. WOFF is a new format that Mozilla is hoping will become the browser standard. It is supported in FireFox only, as of FF3.6

Internet Explorer and @font-face:

Internet Explorer has been implementing @font-face support since version 4*. In any event, it is defintely supported in IE6, IE7 and IE8. However, their implementation relies on Embedded Open Type (.eot), a proprietary format, which no other browsers use. To make IE users happy (which some could argue you shouldn’t, as a method to encourage them to upgrade), import EOT fonts in addition to TTF/OTF fonts, and included them as "fall backs" in the font family declaration (discussed in @font-face implementation below) . FontSquirrel is a place where you can convert fonts you can legally distribute to EOT (and SVG) format.

* Note: Most people say original support of @font-face was IE5. I am not sure and I am not going to pull out my 286 to check. However, with a search, I found that IE4 had a few rendering issues, like not rendering anything on the page until the font was downloaded, so I am sticking with 4.

@font-face implementation

The syntax for the @font-face implemenation is:

@font-face {
  font-family: yourNameForTheFont; /* required */
  src: source;						/* required */
  font-weight: weight;				/* optional */
  font-style: style;				/* optional */
}

The font-family name can be anything you make up. I like to make it one word, for ease of entering it correctly as a value of the font-family property of a CSS selector later.

Declaring font-family source(s):

The source can take several formats. In addition, you can declare more than one source. If the browser doesn’t find the first source, it will go for the next source, and so on, until it either finds a source, or it runs out of sources. Example formats include:

@font-face {
     font-family: curlyQ;
     src: url('../fonts/makeUpSomethingElse.eot');
     src: local('Edwardian Script ITC'),
          url('../fonts/EdwrdScrpItc') format('opentype'),
          url('../fonts/GaelicWimsy') format('svg'),
          url(data:font/otf;base64,T1RUTMillIONsOfLETteRsInaROW12fAtGrrYUUUUBx);
}

In the above example, I’ve listed 5 sources. A bit excessive, but I wanted to explain those five components, so I made an excessive example.

The first declaration is for IE. IE ignores local, which is the first declaration in the second listing. In this way, IE only downloads what it needs and doesn’t download stuff it doesn’t understand.

Next I declare a font local to the user’s machine: local('Edwardian Script ITC')**. This looks for the font file locally on the site visitors computer. IE ignores local, which is great, since it will then ignore the other stuff it doesn’t understand. If you don’t have a local font style to declaration, it is OK. IE also doesn’t understand the multiple listings or the format, so as long as you include local, more than one declaration or a declaration with a format suggestions, IE will do o.k. IE will either ignore in the case of local, or misunderstand it, if there is a format or more than one declaration withing a property/value pair.

If your suggested format is incorrect, as long as the file is an understood format, it should work in Safari, Opera and Firefox.

The next example looks for a file in the SVG format. This is what you are feeding to Chrome and Opera 9.

The last example is a data example, cut way short. Actual fonts will have a few thousand characters. Similar to how you can include a data source for images, you can include them for fonts. TypeKit (described below) actually serves their fonts up in data format to Firefox and Safari, and serves EOT for IE.

**Note: Watch this page become the first google results for Edwardian Script. That would be funny. None of these examples are actually meant to work. I made the URLs and file names up.

Applying imported fonts with CSS selectors

Once the font is declared using the @font-face syntax, you can then refer to it as you would helvetica, arial, etc. Using the example above:

h3 {
    font-family: yourNameForTheFont, curlyQ, arial, helvetica, sans-serif;
}

Note that I have included two imported font family names. That is legal. Note that I have also included common fonts and a default font. That is HIGHLY recommended.

TypeKit

While the TypeKit website indicates support for Firefox 3.5+, Safari 3.4+ and all versions of IE, parsing the TypeKit javascript, they have support for the following browser engine versions:

Browser Type Version
Gecko 1.9.1
Safari 525.13
Chrome

4.249.4
supported by TypeKit.
Chrome has @font-face support turned off by default

IE 6.0
iPhone specifically excluded in Typekit
Opera not included in Typekit, though Opera Supports @font-face

However, I am reading obfuscated code, so I could be talking out of my tushy. I did test in those browsers (not necessarily those versions, but those browsers), and it works in all except iPhone.

The way TypeKit works is you join TypeKit, enter the domain you want to use TypeKit on (you’re only allowed one domain for the free version), and select the fonts you would like to enable for that domain. TypeKit provides you with a link to a script file and a javascript snippet to add to your document <head>. TypeKit also provides you with a class that you can add to elements that you want to have the font, and provides you with a snippet of CSS code for the font-family property that you can sprinkle your CSS with for selectors where you want to use the TypeKit font.

The TypeKit javascript that you attach to your code basically does a LOT of browser sniffing, and only serves up to Gecko, Safari (not iPhone), Chrome and IE6+. Since it is sniffing, it doesn’t serve up any CSS to browsers not in the sniffing. So, while Opera10 does support @font-face, TypeKit does not.

Microsoft WEFT

The Microsoft WEFT is a free utility to create linked font objects. WEFT font objects are compressed and are privately installed by IE in a way that is inaccessible to other applications on the computer and other websites. WEFT supports OpenType (OTF) and TrueType (TTF) fonts in TrueType (TTF) format.

Legalese

The main issue with @font-face is the ownership of the fonts. Make sure you are legally allowed to upload and share a font before using @font-face, as when you embed a font, that is what you are doing: sharing a file. Just like music, for most fonts it is illegal to upload and share without proper attribution and/or payment.

Posted in Browsers, CSS (including hacks), Web Development | 24 Comments