Posted on January 12, 2012 by Estelle Weyl

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: or read more about it at Standardist: Stop SOPA

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

Hack for Webkit

Posted on April 2, 2011 by Estelle Weyl

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?

Posted on June 7, 2010 by Estelle Weyl

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,

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.


According to a somewhat hidden security file at Apple,, 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

Posted on April 21, 2010 by Estelle Weyl

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

Posted on April 4, 2010 by Estelle Weyl

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. 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

Posted on March 9, 2010 by Estelle Weyl

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 –

“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 SXSW | Leave a comment

CSS3 Border Properties, etc.

Posted on March 2, 2010 by Estelle Weyl

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 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.

Posted in CSS (including hacks) | Leave a comment

CSS3 Properties, Values & Browser Support

Posted on February 10, 2010 by Estelle Weyl

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 spacer 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
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   Χ Χ Χ  
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()     Δ Δ  
colorName     Δ  
transparent default   Δ  
rgba() CSS3   filter Χ  
background-image CSS2.1 not inherited  
inherit     Δ Δ Δ  
none default    
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      
background-position-x CSS3   Χ Χ  
backgroun-position-y CSS3   Χ Χ  
background-repeat CSS2.1    
repeat default    
repeat-x / repeat-y      
background-size             -moz- 3.6 -webkit
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