Tag Archive: Internet Explorer

jQuery CSS Browsers Compatibility

Different browsers require different CSS property syntax, especially in CSS 3. In CSS 2, the only property that I know of requires different syntax is opacity property. Firefox called opacity, and IE called filter. You need to set values for opacity and filter properties at the same time. Not only this is inefficient, but it also adds up the size of the CSS file.

Fortunately, jQuery has a css function to make the CSS cross-browser compatible. For example:

$("#thing").css({
   opacity: 0.5
});

It will auto changed to filter CSS property if the user is running IE.

However, since the new CSS 3 is in the draft mode right now, jQuery has not implemented CSS 3 standard yet. It means that border-radius and other properties that are different from each browser needs to write all of the possible style properties into the CSS file.

For more information about jQuery CSS and a jQuery plugin to support CSS 3 syntax, please read original article.

Learning HTML5 Canvas

Recently, I’m interested in learning about the use of HTML 5 canvas element. The canvas element in HTML 5 simply uses JavaScript to draw pictures and animations, as well as develop games. It basically uses setTimeout or setInternal JavaScript function to create an animation in the canvas element. This feature is available on all modern browsers, except Internet Explorer.

I followed some basic tutorials on the Mozilla Developer Center website and created the simple image below:

Click the image to enlarge (http://robbychen.com/canvas/)

I wrote the following JavaScript statements to form the picture above:

var ctx = canvas.getContext("2d");
// Background
ctx.fillStyle = "rgb(200,255,50)";
ctx.beginPath;
ctx.rect(0, 0, 500, 500);
ctx.closePath();
ctx.fill();

// Face
ctx.fillStyle = "rgba(125,222,152,0.5)";
ctx.beginPath();
ctx.arc(200,150,100,0,Math.PI*2, true);
ctx.closePath();
ctx.fill();

// Left eye hair
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(170, 75);
ctx.arc(160,75,10,0,Math.PI,true);
ctx.stroke();

// Left eye
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(170, 85);
ctx.arc(160,85,10,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();

// Right eye hair
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(250, 75);
ctx.arc(240,75,10,0,Math.PI,true);
ctx.stroke();

// Right eye
ctx.fillStyle = "#000";
ctx.beginPath();
ctx.moveTo(250, 85);
ctx.arc(240,85,10,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();

// Nose
ctx.fillStyle = "rgb(0,0,255)";
ctx.beginPath();
ctx.moveTo(190, 120);
ctx.lineTo(210, 120);
ctx.lineTo(200, 140);
ctx.closePath();
ctx.fill();

// Mouth
ctx.fillStyle = "#FF0000";
ctx.beginPath();
ctx.rect(150, 170, 100, 50);
ctx.closePath();
ctx.fill();

// Body
ctx.beginPath();
ctx.moveTo(200, 250);
ctx.lineTo(200, 400);
ctx.closePath();
ctx.stroke();

// Left Arm
ctx.beginPath();
ctx.moveTo(200, 325);
ctx.lineTo(130, 340);
ctx.closePath();
ctx.stroke();

// Right Arm
ctx.beginPath();
ctx.moveTo(200, 325);
ctx.lineTo(270, 340);
ctx.closePath();
ctx.stroke();

// Left Leg
ctx.beginPath();
ctx.moveTo(200, 400);
ctx.lineTo(130, 450);
ctx.closePath();
ctx.stroke();

// Right Leg
ctx.beginPath();
ctx.moveTo(200, 400);
ctx.lineTo(270, 450);
ctx.closePath();
ctx.stroke();

As I commented out the code for creating various parts of the image, the basic code structure for each part is very easy to understand. The getContext function on the first line of the code is to get the dimension of the image I’ll be creating. The fillStyle function is to give shapes different colors. The beginPath function begins with a new shape. The rect function is to draw a rectangle on the page. The closePath function is to connect the lines together to form a shape. If you want to draw multiple lines that don’t connect together, you simply don’t put the closePath function at the end of the process just like I did to the left and right eyes hair. The fill function simply fill the shape using the color specified in the fillStyle function. The arc function draws an arc on the page. You can draw a circle using this function as well. The lineTo function draws a line on the page.

You can read more about these functions as well as other functions that used on the canvas element at WHAT Working Group website.

CSS3 @font-face property

CSS3 introduces a new method for formatting the font on the web page using the font files stored on the local server instead of using the font installed on the user’s computer. By using @font-face property for CSS3, web developers could use their own fonts to format the web page in order to make the same page layout across browsers without worrying the cross-browser page layout. Of course, Internet Explorer doesn’t support CSS3 yet. Below is the syntax for the @font-face property:

@font-face {
font-family: 'NotethisRegular';
src: url('fonts/Note_this.eot');
src: local('Note this Regular'),
local('Notethis'),
url('fonts/Note_this.woff') format('woff'),
url('fonts/Note_this.ttf') format('truetype'),
url('fonts/Note_this.svg#Notethis') format('svg');
}
body {
font-family: NotethisRegular, Verdana, Arial, sans-serif;
}

As you can see from above code, the @font-face property acts like a function. It defines font-family and file location. To use it, simply add the font-family name into the font-family list in the element that needs to be formatted. This is great for logo design which uses some creative fonts.

CSS 3 Rounded Corner Effect and its Problem

CSS 3 is the next version of CSS. It introduces many cool effects for web developer to use. I learned about CSS 3 long time ago, but had never tried it. As I read more and more about CSS 3 and HTML 5 tutorials around the web, I decide to try to learn CSS 3 first. The problem with CSS 3 and HTML 5 is that Internet Explorer doesn’t support these specifications. My personal solution to this problem is to display a warning message through PHP to encourage IE users to completely give up Internet Explorer and switch to other browsers.

When I first learned about CSS 3, I felt that the language is harder to learn than CSS 2. In fact, it is easier to understand once I tried it through hands-on. As far as I know, CSS 3 relies on two different engine: Mozilla and Webkit. That means that to make it cross-browser compatible (except IE), I need to add two CSS properties with same values but slightly different property names. One for the Mozilla engine, another for the Webkit engine. For example, the following produces a black rectangle that has three rounded corners with drop shadow:

width:550px;
height:500px;
background-color:#8a2bcd;
-moz-border-radius-topleft:200px;
-webkit-border-top-left-radius:200px;
-moz-border-radius-bottomleft:200px;
-webkit-border-bottom-left-radius:200px;
-moz-border-radius-topright:200px;
-webkit-border-top-right-radius:200px;
-moz-box-shadow:10px 13px 20px #000;
-webkit-box-shadow:10px 13px 20px #000;

Below is the result:

The problem with this effect is that it only displays the rounded corners as a background image. When I add content inside this div tag, the content overlays above the rounded corners instead of appear inside of the corners, as the following screenshot illustrates:

I haven’t found the solution to this problem yet, but I think I will find the solution eventually as I go through CSS 3 tutorials one by one. To learn more about the properties mentioned above and other CSS 3 properties, just google “CSS 3 tutorials“.

First Time experiencing with GNU/Linux

I just came across an interesting article that talks about Fedora vs. Ubuntu. It makes me remember the first time I was experiencing with different GNU/Linux distros.

Back in the summer of 2009, I was frustrated with the slowness of Windows Vista. I was searching for the solution on how to fix this. Unintentionally, I watched a film from Discovery that talked about the history of the Internet. From the film, I learned that Bill Gates illegally avoided the competition between Internet Explorer and Netscape Navigator and other illegal activities that Bill Gates did to avoid competition, as well as to avoid being sued. I thought that it’s time to switch the operating system.

Initially I was planning to switch to Mac. Because of the high price of the Macbook and Mac OS X only woks on the Apple products (I tried the Hackintosh hack and my laptop doesn’t support it), I downloaded two of the main GNU/Linux dstros, burned them to CDs, and tried them out. First I tried Ubuntu. I booted the OS with live CD many times and it kept go into the terminal. I looked for the problem online and found out that it’s the ISO problem. At that time, I didn’t have enough connection speed to re-download the ISO, so I continued to try Fedora live CD. It booted successfully. After playing around inside the live CD, I decided to install it. The installation process was very easy,. I chose to use the whole hard drive and removed Vista. The installation took about 10 minutes. After the installation, I could easily install my preferred web development tools right from its repositories, Netbeans, Apache, and PHP & MySQL. Later I upgraded to Fedora 12 when it came out.

During my later usage of GNU/Linux, I involved with Open Source movement to promote software freedom and fight against proprietary software. It enabled me to learn more about the bad side of proprietary software, especially Microsoft.

The layout of the website updated again

The layout of my main website has updated once again. Here are the changes:

  • Rewrote page layout CSS to accommodate Internet Explorer
  • Horizontal menu now only contains this semester’s courses to accommodate 800×600 screen

As you can see, I also changed background color for each element. I plan to change background images on EACH page in the near future, too.

Microsoft Gazelle – a new browser OS based on Internet Explorer

Microsoft announced Gazelle secure web browser Operating System concept back in 2009. When I first came across an article that talks about it on buntfu.com, I realized that Microsoft might borrow some code from Internet Explorer to build the OS. Whether MS does borrow the code or not, Internet hackers as well as online criminals will find a way to discover many security flaws just as IE since it’s a Microsoft product. As Ronnie Whisler stated in the article, “Internet Explorer is a virus, adware, spyware, and malware delivery device [as well as Windows]”. Now Microsoft is planning to kill Google Chrome OS through this new OS just as Internet Explorer did to Netscape in the past. We will see how this new OS concept is going as IE’s reputation continues to decrease.

All of the Web Browsers have Security Vulnerabilities

While many countries around the world urge their citizens to stay away from Internet Explorer because of recent GMail attack, Alastair MacGibbon stated that there is no totally secured web browser. The important consideration is “how quickly the browser provider will react to the flaw, manage it and how they will prevent it from happening in the future”. This reminds me of Firefox. Thanks to its bug submission process, the patch will be available in one to two days whereas IE users have to wait one month to get the patch. For more details about this quote, please visit http://www.smh.com.au/technology/enterprise/firefox-opera-downloads-surge-after-ie-security-scare-20100121-mnez.html.

Thanks for subscribing to my blog

I just noticed that there are some readers that have subscribed to my blog. This surprised me because I didn’t intend to write much interesting articles about GNU/Linux and other open source related news. Perhaps it’s the result of my commitment to write at least one article on the blog every day during beginning of this week:) Anyway, thanks for the encouragement to give me the opportunity to write better blog posts. If you don’t know my goal of this blog, it’s to improve my writing skill and learn more about GNU/Linux and other open source related news through my opinions.

I also noticed that there are some of my readers still use Internet Explorer. I strongly discourage you to use IE. As you can read on my earlier post, I’ve completely blocked IE users from entering my main website. If any of you are in corporate environment that are forbidden to use third-party browsers, please let me know through comment. I will reconsider opening my website to IE users. Maybe I will use one of the cross-browser CSS frameworks out there. Thanks:)