Posts Tagged ‘Firefox’

Internet Explorer 9 just might bring on a golden age of browsers

Thursday, August 19th, 2010

Yeah, I know. That might be some hyperbole. But, then again, if IE9 can do everything Microsoft is claiming, then all that time we spend making sure things work in IE, might be put to use doing interesting things.

I remember years ago, back during the browser wars, which were explained to me by my more nerdier friends, I was told Netscape was better and that’s what I used. Until, of course, a few years later when I was using IE6 because that’s what came on my computer and I was like a vast majority of people at the time and didn’t know there was other browsers or that there was any difference between them. And then, somehow, I discovered Firefox 1.5 and everything changed.

When I started web design in school, the IE7 beta was out and my teachers were excited for it because it was going to be so much better than IE6 but, of course, it wasn’t really that much better. And IE8 came out and was a little bit better, but now we just have to spend more time making sure that a website works in more than one version of IE (I stopped caring about IE6 over 6 months ago with the full support of my boss).

But, if Windows 7 is going to take over for XP next year in the corporate world, we might just be entering a world where Internet Explorer actually displays a website the same as the other major browsers. Think about that. I’m not talking about CSS3 transitions or animations, but just basic positioning. I don’t think I’ve ever made a site that didn’t require me to at least fix some minor issues with IE7.

IE9 won’t be the best browser out there, but it will, guaranteed, be the most used because the most people use Windows and most of them use IE. But at least it’s not going to suck and be a generation behind. We don’t need IE to innovate, we just need it to work, that’s what Webkit and Firefox are for.

Speaking of Firefox, Firefox 4 beta 3 has won me back. For a while now, I’d started using Chrome more and more but with this latest beta, I’ve gone back to FF. It’s just as faster and it’s just as powerful under the hood. Plus, I’m sure every browser will have something like Tab Candy, which is coming with the fourth beta I think.

Tags: , , ,
Posted in general | No Comments »

CSS3 Transitions on Transforms in Firefox 4

Thursday, July 29th, 2010

In one of my previous posts, I showed how to use SVG as a mask over top of video and I based it on what I saw in a demo video showing off what Firefox 4 can do. With the release of the second Firefox 4 beta, Mozilla has released a few of the demos along with the code. The demo that I think has the most potential for real world use, is the London Project. I can see sites being animated like this really taking off, for better or for worse. And the great thing is, it only takes a few lines of CSS and one line of JavaScript to do it.

Here’s my version of what Paul Rouget made without the video.

How does it work? Like most CSS3 animations, it’s easy once you’ve figured it out. First off, the HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body class="intro">
<div id="wrapper">
 <div id="intro" onclick="document.body.classList.remove('intro')">
    <h1><a href="#">WELCOME</a></h1>
    <p><a href="#">Click Here</a></p>
 </div>
 <div id="logo">
    <img src="demo_logo.png" />
 </div>
 <div id="picture">
    <img src="robot_slap.jpg" />
 </div>
 <div id="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tristique sem id tortor lacinia vel iaculis turpis tincidunt. Sed tincidunt venenatis neque, vel pretium dui suscipit id. Duis sit amet nibh quis ante pretium faucibus nec in quam. In feugiat rhoncus diam, id porta lorem blandit eget. Vivamus et velit sit amet nunc cursus pretium. Mauris in lectus nec tortor lacinia vehicula. Nam sed elit augue. Mauris id magna ipsum. Quisque sagittis aliquam elit at sagittis.</p>
 </div>
</div>
</body>

The only thing here that’s important to the animation is this line: <div id=”intro” onclick=”document.body.classList.remove(‘intro’)”>. This is what triggers the animation when the right box is clicked. It does this by removing the class “intro” that’s assigned to the body tag and then the elements of the page are animated to their new position on the page. Here’s the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
body {
   margin:0; padding:0;
   background:#dabe25;
 font-family:Arial, sans-serif;
}
#wrapper {
   width:900px;
   height:500px;
   border:10px solid #000;
   margin:50px auto;
   -moz-border-radius:80px 0 80px 0;
 -webkit-border-radius:80px 0 80px 0;
   background:#fff;
   position:relative;
}
#intro {
 width:200px;
 height:100px;
 border:10px solid #000;
 text-align:center;
 position:absolute;
 left:350px;
 top:-200px;
 opacity:0;
}
#intro a {
 text-decoration:none;
 color:#000;
}
#intro h1 {
 margin:10px 0 0 0;
}
#logo {
 position:absolute;
 left:620px;
 top:15px;
 -moz-transition-duration:1s;
 -moz-transition-delay:1s;
}
#picture {
 width:500px;
 height:375px;
 border:10px solid black;
 position:absolute;
 top:60px;
 left:50px;
 -moz-transition-duration:1s;
 -moz-transition-delay:.5s;
}
#text {
 width:250px;
 padding:10px;
 border:10px solid #000;
 position:absolute;
 left:590px;
 top:130px;
 background:#ccc;
 -moz-transition-duration:1s;
 -moz-transition-delay:2s;
}
#text p {
 margin:0;
}
body.intro #intro {
 -moz-transform:translate(0, 380px);
 opacity:1;
}
body.intro #logo {
 -moz-transform:translate(0, -200px);
}
body.intro #picture {
 -moz-transform:translate(0, -800px);
}
body.intro #text {
 -moz-transform:translate(0, -800px);
}

Most of this is styling, which we don’t need to worry about here. We’ll look at just the #logo div because they all behave the same. If you look at the CSS for #logo, you’ll see its final positioning on the page. But there’s also body.intro #logo. Here, we’re using the transform property to animate the positioning of the #logo div. Using translate, we set the initial position to -200px which will take it off the viewable part of the page. And when the #intro div is clicked and the “intro” class is removed from the body tag, the #logo div is animated to its permanent position using the -moz-transition-duration property. All the different elements come in in a staggered effect using the -moz-transition-delay property.

And that’s it. Something that people will use Flash to get the same effect can now be done using just HTML, CSS and the tiniest amount of JavaScript. Right now this only works in Firefox 4, but it’s designed to display properly in all other browsers, just without the animation or, in some cases, the rounded corners.

Poke around in the demo and look at the Mozilla one, which adds SVG masks to the mix. Getting on board with techniques like this as early as possible is going to be the right move, especially since HTML5 is the latest buzzword clients are bringing up when talking about websites. And I’m a fan of adding in extra things like this for people that use newer browsers, as long as it still displays properly in older ones.

Tags: , , ,
Posted in HTML/CSS | No Comments »

Using HTML5 geolocation and the Google Maps API

Wednesday, June 9th, 2010

The guys at Doctype.tv have done a couple of videos on Google Maps API and the HTML5 geolocation feature, but they didn’t show exactly how to link them together. For someone like me, who’s still just getting comfortable with JavaScript it can take a bit to figure out exactly how the get the two to hook up. So I took the code they provided and worked it out. Here’s a demo of what we’ll be making.

First, for the HTML all you need is this:

1
<div id="mapDiv"></div>

If you really wanted to, you could even just use JavaScript to add the div to the page, but this is good enough for what we want to do here. Next, just a little CSS to make the map look nice:

1
2
3
4
5
6
7
8
#mapDiv {
    width:500px;
    height:300px;
    border:1px solid #efefef;
    margin:auto;
    -moz-box-shadow:5px 5px 10px #000;
    -webkit-box-shadow:5px 5px 10px #000;
}

Now for the JavaScript. First we need to like to the Google Maps API:

1
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

Now we have to check that geolocation is actually available with the browser the visitor is using:

1
2
3
if(navigator.geolocation) {

}

So far, I’ve only been able to get this to work in Firefox 3.6, it’s supposed to work in Chrome but it hasn’t been working for me. Next we need this line:

1
navigator.geolocation.getCurrentPosition(hasPosition);

What’s happening here? We’re using the built in HTML5 getCurrentPosition function and passing in a function called hasPosition, which we have to create now, above this line.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function hasPosition(position) {
    //Creates a variable called point and sends the latitude and longitude to Google Maps to get your position
    var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
   
    //Settings for the map  
    myOptions = {
        zoom: 15,
        center: point,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
   
    //Finding the div we want the map to be in
    mapDiv = document.getElementById("mapDiv"),
    //Pass in the div and map settings to the map
    map = new google.maps.Map(mapDiv, myOptions),
   
    //
    marker = new google.maps.Marker({
        position: point,
        map: map,
        title: "You are here"
    });
}

And you should get this.

Here’s the entire code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Geolocation</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script>
   
    if(navigator.geolocation) {
       
        function hasPosition(position) {
            var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
           
            myOptions = {
                zoom: 15,
                center: point,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
           
            mapDiv = document.getElementById("mapDiv"),
            map = new google.maps.Map(mapDiv, myOptions),
           
            marker = new google.maps.Marker({
                position: point,
                map: map,
                title: "You are here"
            });
        }
        navigator.geolocation.getCurrentPosition(hasPosition);
    }
</script>
<style>
#mapDiv {
    width:500px;
    height:300px;
    border:1px solid #efefef;
    margin:auto;
    -moz-box-shadow:5px 5px 10px #000;
    -webkit-box-shadow:5px 5px 10px #000;
}
</style>
</head>

<body>
<div id="mapDiv"></div>
</body>
</html>

Tags: , , , , ,
Posted in HTML/CSS | 1 Comment »

Google Chrome will include Flash Player and that’s a good thing

Tuesday, March 30th, 2010

Today Google’s The Chromium Blog announced that the developer version of Chrome will come with Adobe’s Flash Player pre-installed and I think this is some of the best news that any web designer or developer could hear. Why is it a big deal? If Flash Player comes pre-installed on all of the main browsers, you’ll know that you’re Flash content will be guaranteed to be accessible to close to 100% of Internet users. No more need to check what version they have, the browsers would be able to update Flash Player automatically. And Adobe would be able to work with each browser maker to tweak Flash Player to run better, custom versions wouldn’t be that big of a deal if the Google or Mozilla worked with Adobe on improving Flash Player.

If you read the blog post on The Chromium Blog, don’t bother reading the comments, instead of an intelligent debate about whether Google is moving in the right direction, it’s just a lot of blather from what is becoming the HTML5 “tea party”. I really don’t understand the hate for Flash nor the absolute certainty that HTML5 is better and going to be a replacement. I’ll use the best option, whether it’s Flash or something else. Dismissing one out right makes no sense to me.

I’ve been saying that the browsers should do this for a while now and I’m not surprised that it was Google that did it first. If Mozilla does it with Firefox, than I’m sure that the others will follow. Flash is a great technology and if companies like Google get involved, I’m pretty excited about how much better it can get. These are great days for the Internet and we shouldn’t ruin it by turning everything into this vs that battles.

Tags: , , , , , ,
Posted in flash | No Comments »

Make an Apple style navigation in CSS3 vs the way Apple does it

Monday, March 22nd, 2010

The best way to learn something like CSS3? Challenge yourself to build something that you’ve seen. I sat down the other day and built Apple’s navigation using only CSS. I know for sure I’m not the first person to build a CSS only Apple style nav, but thinking about this made me wonder, how did Apple build their own navigation? I’ve never seen any examples of that. The reason? It’s not exactly sexy CSS but it works and is a good way to get the desired results.

Here’s how to build it using only CSS. First off, we need to set up the HTML, it’s pretty simple:

1
2
3
4
5
6
7
8
9
10
11
12
<body>
<div id="nav">
  <li><a class="first" href="#">Home</a></li>
  <li><a href="#">Store</a></li>
  <li><a href="#">Mac</a></li>
  <li><a href="#">iPod</a></li>
  <li><a href="#">iPhone</a></li>
  <li><a href="#">iPad</a></li>
  <li><a href="#">iTunes</a></li>
  <li><a class="last" href="#">Support</a></li>
</div>
</body>

Pretty simple, standard navigation. I’m not going to go step-by-step with this, you can figure stuff out pretty quickly if you poke around. Here’s the CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
body {
    margin:0;
    padding:0;
}
#nav {
    width:824px;
    height:38px;
    margin: 30px auto 0 auto;
}
#nav li {
    display:inline;
    text-align:center;
}
#nav li a {
    background:-moz-linear-gradient(top, #CCC, #999);
    background:-webkit-gradient(linear, left top, left bottom, from(#CCC), to(#999));
    width:103px;
    height:28px;
    display:inline-block;
    float:left;
    padding-top:12px;
    text-decoration:none;
    color:#000;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    text-shadow: #fff 0 0.5px 0;
}
#nav li a:hover {
    background:-moz-linear-gradient(top, #999, #666);
    background:-webkit-gradient(linear, left top, left bottom, from(#999), to(#666));
}
#nav li a:active {
    background:-moz-linear-gradient(top, #999, #666);
    -moz-box-shadow:inset 1px 3px 5px #000000;
    background:-webkit-gradient(linear, left top, left bottom, from(#999), to(#666));
    -webkit-box-shadow:inset 1px 3px 5px #000000;
}
.first {
    -moz-border-radius:5px 0 0 5px;
    -webkit-border-radius:5px 0 0 5px;
}
.last {
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-radius:0 5px 5px 0;
}


Here’s what we get.

A decent amount of CSS, but there’s no images or JavaScript, so it will load faster. It doesn’t work in IE7 or IE8, this might work in IE9 when they finalize it, hopefully. The text-shadow doesn’t seem to work in Webkit browsers, but I’m sure Google will change that sooner rather than later. So we can build this, but if it only works in Firefox and Webkit browsers, should we bother? And if it doesn’t work in all browsers, how does Apple do it?

Apple’s solution is pretty simple and works in everything. They use CSS with images and no JavaScript. But the thing I found surprising is they just use one big image, you can check it out here. They just reuse and reposition the same image over and over for their navigation bar. Here’s how Apple does it:

1
2
3
4
5
6
7
8
9
10
<div id="nav">
  <li id="apple"><a href="#">Apple</a></li>
  <li id="store"><a href="#">Store</a></li>
  <li id="mac"><a href="#">Mac</a></li>
  <li id="ipod"><a href="#">iPod</a></li>
  <li id="iphone"><a href="#">iPhone</a></li>
  <li id="ipad"><a href="#">iPad</a></li>
  <li id="itunes"><a href="#">iTunes</a></li>
  <li id="support"><a href="#">Support</a></li>
</div>

Standard navigation HTML, all the divs with ids are necessary for the positioning of the background images. Here’s my version of the CSS Apple’s using (I simplified it a bit):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
#nav {
    width:982px;
    height:38px;
}
#nav li {
    display:inline;
}
#nav li a {
    float:left;
    width:103px;
    height:0;
    overflow:hidden;
    display:inline-block;
    padding-top:38px;
    background:url(globalnavbg.png) no-repeat;
}
#nav li#apple a {background-position:0 0;}
#nav li#store a {background-position:-103px 0;}
#nav li#mac a {background-position:-206px 0;}
#nav li#ipod a {background-position:-309px 0;}
#nav li#iphone a {background-position:-412px 0;}
#nav li#ipad a {background-position:-515px 0;}
#nav li#itunes a {background-position:-618px 0;}
#nav li#support a {background-position:-721px 0;}

#nav li#apple a:hover {background-position:0 -38px;}
#nav li#store a:hover {background-position:-103px -38px;}
#nav li#mac a:hover {background-position:-206px -38px;}
#nav li#ipod a:hover {background-position:-309px -38px;}
#nav li#iphone a:hover {background-position:-412px -38px;}
#nav li#ipad a:hover {background-position:-515px -38px;}
#nav li#itunes a:hover {background-position:-618px -38px;}
#nav li#support a:hover {background-position:-721px -38px;}

#nav li#apple a:active {background-position:0 -76px;}
#nav li#store a:active {background-position:-103px -76px;}
#nav li#mac a:active {background-position:-206px -76px;}
#nav li#ipod a:active {background-position:-309px -76px;}
#nav li#iphone a:active {background-position:-412px -76px;}
#nav li#ipad a:active {background-position:-515px -76px;}
#nav li#itunes a:active {background-position:-618px -76px;}
#nav li#support a:active {background-position:-721px -76px;}

See, all Apple is doing is a lot of repositioning of the background image, which is going to make the navigation look the same in every browser. So, their CSS isn’t as sexy as their design, but it gets the job done. And all this shows that CSS3 is a ways away before you can use it consistently and get the same results in all browsers. But by figuring out how to make things like this in CSS3 will give you a head start when you can finally build these things and not have to worry about cross browser issues.

Tags: , , , ,
Posted in HTML/CSS | 2 Comments »

Setting up a CSS3 radial gradient for your site’s background

Saturday, March 20th, 2010

In my last post, I showed how to use CSS3 linear gradients to create your web sites background. This time I’ll show you how to do it with radial gradients. It’s simple for Firefox, but it’s a bit more complicated with Webkit browsers such as Safari and Chrome.

First, the Firefox way:

1
html {height:100%; background:-moz-radial-gradient(center, #f4fafe, #a2d2ed) no-repeat #a2d2ed;}

Simple, type of gradient, the start position, the start color, end color. Then I put in no-repeat and set the background color for longer pages. The Webkit syntax took a bit of figuring out but the same effect can be created:

1
html {height:100%; background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(#f4fafe), to(#a2d2ed)) no-repeat #a2d2ed;}

Whoa, a lot more is going on here, but once you know what’s happening it’s not that complicated. First we set the gradient type, then the start position where I’ve set it to 50% of the width and 50% of the height of the page. Next the start radius, which I’ve set to 0. Then the end point, which is also 50% 50%. This causes the gradient to travel towards every side of the page. Next, the end radius, which you set to how big you want your gradient to be. And finally, your start and end colors.

Pretty simple once you know what to do, but I think I’m partial to the Firefox syntax and, hopefully soon, there will be a standard way to write this and it will work in Internet Explorer.

Tags: , , , , , ,
Posted in HTML/CSS | No Comments »

Use CSS3 gradients to replace your site’s background

Friday, March 19th, 2010

If you’re a web developer like me, you’ve made plenty of sites where the design includes a large gradient for the background coloring. Up until now the only way to do was to either, have a huge image that was the width of the site and would take forever to load or to use a however tall and 5px wide image file that you repeat on the x axis. Not that big of a deal, but stuff like the image file no loading or loading slowly can ruin the look of a site. Which is way I think that CSS3 gradients are going to be something that people will use on close to every site they build.

Here’s the great thing about it, you can just add a gradient to the background of any element on your site without having to worry about image sizes. The code for gradients it this:

1
2
3
4
5
/* For Firefox */
-moz-linear-gradient(start point, start color, end color);

/* For Safari and Chrome */
-webkit-gradient(type, start point, end point, from(start color), to(end color));

I was messing around with gradients and I wanted to add one to the background of the body of a test page I was build. So I put:

1
2
3
4
5
body {
    height:100%;
    background:-moz-linear-gradient(top, #666, #CCC);
    background:-webkit-gradient(linear, left top, left bottom, from(#666), to(#ccc));
}

You’d think this would add a gradient to the body background and you could move on to the next thing. I was surprised to find that it did this:

The gradient is only the size of the content! Add more content and it stretches out. This isn’t something that I can see being useful for a website and, amazingly, I couldn’t find anything on the web about people using CSS3 gradients for the body background. Every example I found just showed little squares of blue to red gradients. I messed around for a while and finally had an idea. What if I applied the background to the html tag? Here’s what you get:

Now the gradient stretches to the height of the whole page. Now, if you’re going to do this, you have to add a couple of things on to the end of your CSS3 mark up:

1
2
3
4
5
body {
    height:100%;
    background:-moz-linear-gradient(top, #666, #CCC) no-repeat #ccc;
    background:-webkit-gradient(linear, left top, left bottom, from(#666), to(#ccc)) no-repeat #ccc;
}

If you don’t add the no-repeat, the gradient will repeat on long pages and if you don’t set the background color, I set it to the bottom color on the gradient, the background color will be white on long pages after the gradient ends.

As usual, this won’t work in any version Internet Explorer that’s out right now and it doesn’t seem to be working in the IE9 preview, so if you’re going to use this, you’ll still have to do it the old way if you want IE users to have the same experience on your website. But that won’t be that big of a deal, if like me, you usually have seperate CSS stylesheets for IE7 and IE8.

Tags: , , , , , ,
Posted in HTML/CSS | 2 Comments »

The Internet will be a better place when everyone catches up to Chrome

Tuesday, March 16th, 2010

Since Mozilla Firefox was first release back in 2004, I’ve been a die hard user. Honestly, at that time I didn’t know anything about HTML, rendering engines or web standards, I think it was just the fact that for the first time since Netscape, if felt like someone was making a browser that was designed to give the user the best experience possible. And for the last 5 years, I’ve been forcing people, most who didn’t even know that there was more than one browser, much less hundreds, to download it. Anyone who still used IE6 was just plain weird! And then, when I went to school to learn all things web, they told us straight out, Firefox is better. Next, I discovered Web Developer and Firebug. They are two essential tools to building websites, if you aren’t using them, then you’re just making your job harder. Nothing could compare to the plug-ins Firefox had.

Every once in a while, I’d give something else a chance, Opera or Safari. Neither, for different reasons, ever really caught on with me. I would last maybe a week uses them but would always go back to Firefox. Then in 2008, Google released Chrome. At first, my reaction was “Great, another browser.” I really wondered what Google could offer that the other’s weren’t already. I gave it a shot and at first, I wasn’t impressed. It didn’t seem any faster than Firefox and it was bare bones, seriously bare bones. Then I discovered Chrome Experiments. I was impressed but while it was pretty cool what Chrome’s V8 JavaScript engine could do, it wasn’t enough for me to change. But something was happening to Firefox, it took up to 5 minutes to start up sometimes, it would crash and it would take forever to load some web pages. So I gave Chrome another try. And I kept using Chrome until Firefox 3.5 came out, which was supposed to fix most of the bugs that annoyed me.

Now I still use Firefox for when I’m building and testing a web site but I kept using Chrome for just surfing the web. In the long run, it is faster and with sites like Facebook and, of course, Google Docs, it loads faster and crashes a lot less. But that’s not the reason I want the other browsers to be like Chrome, it’s the JavaScript engine. Lately, I’ve started looking to jQuery in order to make some of the sites I build more dynamic. First of all, I know this stuff isn’t going to work that great in Internet Explorer and you just have to accept that. But a navigation I was working on today worked amazingly in Chrome but was jumpy and awkward in Firefox. Yesterday, I read an article at Webdesigner Depot on some annoying CSS3 bugs in Firefox.

So why will everything be better when the other browsers catch up to Chrome? With the web slowly moving towards HTML5 and CSS3 and the use of JavaScript to create dynamic sites, right now, to get the best experience, you have to use Chrome. Firefox just can’t render the JavaScript fast enough in a lot of cases and most of it just doesn’t work in IE7 or IE8. At first, Chrome’s bare bones design wasn’t a positive to me, but now I see that it’s the other browsers that have become bloated and that’s causing them to slow down. I get excited to think what I can make using CSS3 but then I have to slow myself done and ask, “If I make that, will it been seen by enough people to make it worth it?” I know that Firefox will catch up but will Microsoft advance Internet Explorer enough for web designers and developers to really use the tools out there? Or will Chrome just be always ahead, showing us the future?

Tags: , , , ,
Posted in general | No Comments »

Why I’m more excited about CSS3 than HTML5

Sunday, February 28th, 2010

HTML5 is in reality a long why from being finalized. Sure Safari, Chrome and Firefox support it and there’s a work around using Javascript to get Internet Explorer to work with it, but really it’s going to be a while before we get to use HTML5′s features and even then, I don’t think it’s going to change that much, at least in the being. The video tag is not close to being the Flash killer it’s been advertised as so far. The canvas tag will lead to some cool stuff being made but I’m not thrilled with the heavy use of Javascript to make things work. Plus, Javascript can be as big as, if not more of, a CPU hog than Flash. But with CSS3 I can see how web sites get made and displayed changing immensely.

Why am I so excited? It’s probably the little things, like being able to rotate elements or add gradients with out using images. Anytime you can use code to build an element and not use an image, the file size is going to be smaller and the page is going to load faster. I love building sites with CSS and rarely do I go back to the designer I’m working with and say “I can’t do that.” I enjoy the challenge, but most of the time, when there something that I can’t build, it’s something that I’ll be able to do with CSS3. I’m excited because this is going to open up new design possibilities that we haven’t be able to do yet. HTML5 will change the functionality of the web, but CCS3 will change the face of it.

Today I came across a link to 50 Awesome Animations made with CSS3 and although most of them only work in Safari and Chrome, it’s pretty exciting to see what can be done with CSS3. Some of them need Javascript, which is something I’m not too thrilled about. Why? Because one of the main complaints against Flash is it being a CPU hog and the cause of this a majority of the time is bad coding. And the amount of bad Javascript code out there dwarfs bad ActionScript code, so if CSS3 increases the amount of JS out there, I’m really hoping Microsoft steals V8, Chrome’s JS rendering engine! It’s open-source, but it would be more fun for everyone if MS stole it.

But once again, like my post about HTML5, we are going to have to wait for Microsoft to support CSS3 before we can really use it. Everything I read about CSS3 now tells you to make it look one way for supporting browsers and then another, less attractive way for IE. I don’t mind designs appearing a little different from browser to browser, but I have no interest in a site appearing completely different in one compared to the rest. Hopefully, with IE9 being released at the end of this year, Microsoft will add full CSS3 support and we can take the Internet to the next level, in terms of design.

The bottom line it this, CSS3 is going let us do things the either we weren’t able to do before or we needed something like Flash to create. It’s going to take some time, but over the next couple of years, what we are going to be able to do with a “static” web page is going to be amazing. The future is here, the rest of the Internet just needs to catch up!

Tags: , , , , , ,
Posted in HTML/CSS | No Comments »

HTML5 and CSS3 Will Have to Wait for IE9

Monday, February 22nd, 2010

I am excited about the future of web development, the stuff that we’re going to be able to do with HTML5 and CSS3 is going to be amazing, even some of the stuff that people are doing now it pretty intense and I’m beyond happy that most of them are showing how they did it. But, as usual, it seems that Microsoft is holding back the web with Internet Explorer. I’ll be the first to admit that IE8 isn’t that bad of a browser and even IE7 was a massive improvement over IE6. I don’t know why, but it just seems that Microsoft is always a generation behind the other browsers. Where would the web be if Firefox and the Webkit browsers hadn’t come along?

Because a vast majority, around 90% (including me), of computer users run Windows as their OS and I can only guess at the amount of those that only have IE installed, it’s going to be up to Microsoft to bring in widespread support for HTML5 and CSS3 features. And there’s the problem and something that I just can’t understand about Microsoft and their development of Internet Explorer. What is stopping them from adding the support for these features that all the other browsers seem to be able to add? You might think you can ignore this, believing most people are smart enough to use Firefox or Chrome, but they aren’t. My parents still don’t understand the concept of a web browser, much less that there’s more than one out there.

Perhaps Microsoft’s IE development is just part of the overall corporate direction of the company. Something that has become a giant pain in the butt of web people everywhere was the shift in Outlook 2007 to use Word’s HTML rendering instead of IE’s. This has sent the whole HTML email design world back to 1998. I know it’s not a glamorous side of web development, but a lot of clients want that service and I can’t tell you how much time I’ve spent building something that, by today’s standards, is simple and only a couple of lines of CSS, only to have to rebuild it in tables and inline styles.

HTML5 isn’t officially done yet, but there is enough support that you could build a site using it, but for the most part you have to include a Javascript file in order for IE to recognize the HTML5 tags, not really a big thing, but it is a pain, especially if someone has Javascript turned off in their browser. And, sadly, there’s no Javascript file you can use that makes IE recognize the unsupported CSS3 attributes, at least that I’m aware of.

So what does this all mean? In the end, either we wait for Microsoft and IE to catch up or we return to the days of building different versions of sites for different browsers. I managed to miss that the first time around and I really don’t want it to happen again, especially now that we have 5 widely used browsers, not 2. And it’s not just IE that’s behind on this. Most of the CSS3 examples I’ve seen out there only work in Safari and Chrome, Firefox can run some but not the ones that rely heavily on Javascript. And I don’t want anything to rely on Javascript, but that’s an entire other post.

Tags: , , , , , , ,
Posted in HTML/CSS | No Comments »

SUBSCRIBE

TWITTER

CATEGORIES

  • flash (26)
  • general (23)
  • HTML/CSS (48)
  • Uncategorized (3)
  • web development (1)

    • ARCHIVES