Working at Visa

Visa is a bastion of mediocrity with low morale. I had high hopes when I accepted a role at Visa Inc. in Foster City. I was hired to work on a front end components library, speak at conferences, etc.

Visa has a world famous brand name so even though the company is segregated, sexist and has the lowest employee morale, it will take a long time before all the cookies crumble. Visa is a good place to work if you are a staunch believer in nepotism and the caste system. Other than the regular paycheck, I really have nothing good to say about Visa, but I am starting off as positive as I could be on this depressing topic.

So why does Visa suck so bad?

  • Sexist: women hold specific roles and have limited to no chance of growth.
  • Racist: unless you’re Indian, you’re out of luck. Latinos are relegated to cleaning and food services. Being black is OK, as long as you are not African American. Being white is OK too, as long as you’re male.
  • Ageist: Not sure if they’re being cheap or ageist, but if you’re not of Indian descent, the best way to join Visa is as an intern / recent college grad. Anyone older, with experience, skills, and compensation to reflect that, forget it.
  • Cheap: They would rather hire 40 mediocre engineers at $40/hour than 5 excellent engineers at $120/hour. They’re getting rid of their quality contractors and back filling with less than mediocre “warm bodies”. Penny wise. Pound foolish.
  • Bait and switch. Promised benefits then cut them when we signed on the dotted line. Visa cut the retirement plan (6% pay cut), they increased insurance co-pays by 20%. They required managers to give poor reviews so they didn’t have to give good bonuses, pay raises or stock. They don’t pay for anything: no snacks, no birthday cakes, no small touches to make staff feel valued.
  • Unethical: The $5,200 continuing education benefit they allegedly offer can only be used for college courses, not for conferences or workshops that professionals access as continuing education. They only hire college grads, so a ‘college class’ benefit is not an actual benefit.
  • Name droppers: Where you graduated from is important. What you know is not.
  • Moronic: The quantity of our code is more important than the quality of code. Any good Engineering leader should knows a few lines of good code is better than many lines of bad code. At Visa, there are no good leaders. The metrics measure quantity not quality. That they have metrics itself is mind boggling.
  • Empire builders: Managers like to hire many people, building empires, to show their importance. They have no clue how to manage. No interest in managing.
    Just want to brown nose to their own higher ups, and perhaps add value to their name so they can get a prestigious title, not realizing Visa is one of the few SF Bay Area companies that values nepotism over actual accomplishments.

My advice to potential employees is to go to GlassDoor and read all the reviews. Sort by date. You’ll see Visa has been getting worse and worse. Visa is a sponsor of Glassdoor, so the first review will likely be a positive one from an intern. Other than that, you’ll notice the complaints you see, including this one, are part of a trend, not outliers.

My advice to Visa is to invest in their employees. The morale is incredibly low. They’re going to lose a lot of employees. Crappy staff will stay on, but the go-getters, those with real talent, are not going to stay. The only ones who will be on the payroll in a few months are those too lazy to move on to better environments. Improve morale now, or you don’t stand a chance. If you have no talent left, you’re not going to be able to recruit anyone with talent. You’ll only attract talentless seat warmers who will never learn and will never leave. But with the way you treat talent, that’s what you deserve.

Posted in Web Development | Leave a comment

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 | 3 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) | 6 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