HTML5 and CSS3 Browser Support

Cool Sites, CSS

I just stumbled on a cool site – html5readiness.com. The site displays a break down of browser support for HTML5 and CSS3 (Canvas, SVG, GeoLocation, Transforms, Border Radius, etc). The browsers included for 2010 are IE 7, IE 8, IE 9, FireFox 3.5, FireFox 3.7, Opera 10.50, Safari 4, and Chrome 4.

I wasn’t surprised to find that Safari and Chrome have the most HTML5 and CSS3 support (since both use the webkit engine). Firefox support for HTML5 and CSS3 is not far behind Safari and Chrome.

I was not surprised to find that Internet Explorer lags far behind (although IE 9 adds support for SVG, Video, SVG as Background, Media Queries).

I was very surprised to find that HTML5 and CSS3 support in Opera 10.50 rivals that of FireFox.

Anyway, if you ever need to know what is supported by each browser, take a look at html5readiness.com.

P.S. I wonder why Safari and Opera aren’t used as much as Firefox, Chrome and IE. Safari can be used with a Mac or PC, but appears to be used primarily by Mac users. Chrome has been around since 2008 and already has 5 times as many users as Safari (see browser stats).

Checkout My New Site - T-shirts For Geeks

CSS: Styling Input Fields

CSS

I’m working on a project where I’m using CSS to add a border radius and background image to an input field. Background images are supported by all browsers, but border radius is only supported by Firefox, Safari, and Google Chrome.

Continue reading

Checkout My New Site - T-shirts For Geeks

Vertical Text with CSS

CSS

I’m working on a new JQuery Plugin that requires the text to be vertical. This can easily be accomplished using CSS, but I found that the vertical text may appear differently in each browser depending upon the element that is used. I was able to display the text vertically in Firefox, IE8 (and IE7), Google Chrome and Safari. I looked at Opera’s CSS support and it doesn’t appear to support vertical text.

Continue reading

Checkout My New Site - T-shirts For Geeks

CSS: Create List Style Color Different Than List Text

CSS

I wanted to use CSS to create a Unordered List where the color of the list-style (the bullet) was different than the list-item (the text). First I set the color for the Unordered List:

.certsBlock ul {
        color:#1AB7EA;
}
.certsBlock ul  li {
        list-style:square;
        margin-bottom:5px;
}

Then I add an additional element inside the list-item (the text) and change it’s color:

.certsBlock ul  li p {
        color:#fff; /*white*/
        margin:0;
}

Now I create my Unordered List:

<div class="certsBlock">
        <ul>
                <li><p>Item 1</p></li>
                <li><p>Item 2</p></li>
                <li><p>Item 3</p></li>
        </ul>
</div>

So the color of the list-style (the square bullet) will be a blue and the list-item text will be white. Easy enough.

Checkout My New Site - T-shirts For Geeks

Blueprint CSS Framework

CSS

As a freelance developer, I am always looking for more work. The other day I was reading the skills required for a particular job and it mentioned that the candidate should have knowledge of the Blueprint CSS Framework. I had never heard of the framework before and was curious as to why one would need a framework for CSS. I consider myself to be an expert CSS designer, but I decided to check out this Blueprint thingy.

The website says that by using the Blueprint CSS Framework, I can cut down my development time and it eliminates the discrepancies across browsers. Sounds intriguing. After a bit more research, I found that Eric Meyer’s Reset CSS is incorporated into the framework. I have learned a great deal about CSS from Eric Meyer over the years:

Since I was beginning a redesign for a client, I decided to use the Blueprint framework as the basis for the effort.

Continue reading

Checkout My New Site - T-shirts For Geeks

CSS: inline-block IE7 Hack

CSS

I was demoing a recent web design to a client when I noticed that the menu items were not displaying correctly. The client uses ie7. While Firefox is my primary browser, I usually test my design in IE and Safari (and tweak if necessary). I didn’t this time because I did not think there was a difference for the CSS styles that I was using. I was wrong.

I usually use li elements for menu items:

<ul>
	<li><a>Home</a></li>
	<li><a>About</a></li>
	<li><a>Contact</a></li>
</ul>

To create horizontal menu items, I change the display attribute to inline in my CSS file.

li {
    display:inline;
}

For this particular design, I added a vertical divider (image) between each menu item. In order to do this, I used the inline-block attribute.

#menu li {
	display:inline-block;
	margin:0;
	list-style:none;
	width:122px;
	height:45px;
	background-image:url(images/menu_divider.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	text-align:center;
	padding:0;
}

This looks fine in Firefox and Safari, but IE7 (and IE6) only supports inline-block on elements with natural display: inline. See CSS Display declaration.

I found a hack. Adding zoom: 1 and *display: inline will make IE7 display the li’s as inline-block.

#menu li {
	display:inline-block;
	margin:0;
	list-style:none;
	width:122px;
	height:45px;
	background-image:url(images/menu_divider.jpg);
	background-repeat:no-repeat;
	background-position:top left;
	text-align:center;
	zoom: 1;
	*display:inline;
	padding:0;
}

Next time, I will remember to test my designs in the major browsers before it is shown to the client.

Checkout My New Site - T-shirts For Geeks

CSS: Placing One Image On Top Of Another

CSS

I have recently discovered two ways to use CSS to place one image on top of another. I am working on a photogallery management plugin (JQuery) and I wanted to add an delete image to the bottom right of each thumb image. The user will be able to click on the delete image to delete the thumbnail. The image below displays how I want the thumbnail to appear:

<img class="alignnone" title="Delete Example" src="http://grasshopperpebbles.com/images/posts/delete_example.png" alt="" width="118" height="85" />

The key to both approaches is to place the first image as a background image of a container.

.thumb {
     float:left;
     width: 100px;
     height: 100px;
     background:url(images/thumbs/pic1.jpg);
}

My first approach for styling the second image was to set the ‘background-position’ to ‘bottom right’.

.thumbDelete {
     width: 100px;
     height:100px;
     background:url(images/delete-24x24.png) no-repeat bottom right;
}

While this positioned the delete button where I wanted, because the dimensions are the same as the thumbnail image, the entire image became clickable (not just the delete image).

So my next approach was to float the delete image and set the margin-top to 50%:

.thumbDelete {
     float:right;
     width: 24px;
     height:24px;
     background:url(images/delete-24x24.png) no-repeat;
     margin-top:50%;
}

This placed the delete image on the bottom right (and only the delete image is clickable).

Creating the HTML is the same no matter which approach you take:

<div class="thumb">
<div class="thumbDelete"></div>
</div>

Easy enough.

Checkout My New Site - T-shirts For Geeks

CSS: Using Percent With Margin

CSS, Pebblet

I am working on a Dojo widget where I wanted navigation buttons to be vertically centered within a container. Initially, I set the margin-top property in the CSS file to an exact value: (height of the container – height of the button)/2. This worked fine, but as I began to use the widget, I realized that I wanted to be able to change the dimensions of the widget without having to change the CSS file. So I changed the margin-top value of the navigation button to 50%. Didn’t work. I assumed that setting the margin-top property to 50% would center the button vertically within it’s container. Wrong. I then set it to 350% and it still did not center the button.

I googled and found that browsers determine the actual size of the margin by multiplying the percent against the ‘width’ of the parent container. Huh? That’s ridiculous! It’s not even logical. Why would the width of the parent container have anything to do with the margin-top property? So because the width of my parent container is 40px, if I set the margin-top to 50%, the actual margin-top is 40px * 50% = 20px. How assinign! Who approved this CSS spec? I would not have been surprised if IE interpreted the margin-top this way, but Firefox? Can anyone tell me why this is logical?

Checkout My New Site - T-shirts For Geeks

Dojo – Changing Dialog’s Underlay Color

Ajax, CSS, Dojo, Pebblet

I read on dojocampus.org that the color of the Dialog’s underlay can be changed. The example on the site shows how to change the underlay color of an individual dialog box:

    #dialogColor_underlay {
        background-color:green;
    }
<div id="dialogColor" title="Colorful" dojoType="dijit.Dialog">
     My background color is Green
</div>

But, this only changes the underlay color of an individual dialog box. It seems to me that unless I am building an Dojo application for, let’s say a kid’s website, that I want the color change to be consistent. I also don’t want to have to create a separate style for each Dialog box that I may have on a page. So, to change the underlay color for all dialog boxes on a page:

.dijitDialogUnderlay {
     background: green;
}

Easy.

Checkout My New Site - T-shirts For Geeks

IE offsetHeight: Height undefined if Height is set to ‘Auto’

CSS, Javascript, Pebblet, YUI

In order get the height of a div in IE when the height is set to auto (or not set), use offsetHeight. I generally do not set the height of a div if I want the height to be determined by the the content inside the div. I was working on a YUI widget that is similar to my imAnimTabber JQuery plugin. I used YUI’s animation utility to display the tabbedd content. When using the animation object, you have to specify the attribute that is to animated and the value the attribute should be set to:

{height:  {to:  ‘100px ‘}}

Because the height of the divs for the tabbed widget is dependent upon the content, I do not know what the height of the content will be. To get the height of each div in Firefox, I simply called the getStyle Dom method (YUI):

YAHOO.util.Dom.getStyle(element, ‘height’);

Of course, IE returned ‘undefined’ as the height value. So, I first had to determine if the user was using ie and then use ie’s offsetHeight to determine the height:

if (YAHOO.env.ua.ie) {
     var el = YAHOO.util.Dom.get('element');
     var h = el.offsetHeight;
}

Since we know that Microsoft is not going to change ie, I hope that YUI will change their getStyle Dom method so that it can accommodate the various browser inconsistencies.

Checkout My New Site - T-shirts For Geeks