jump to navigation

Common mistakes and misconceptions with CSS November 10, 2008

Posted by fofo in CSS, XHTML.
Tags: , ,
add a comment

In this long post, I will try to highlight some mistakes that are made by many designers-developers using CSS. Many of those mistakes have a simple explanation but if you do not know the answer can cause anxiety and frustration. I will also try to clarify some misconceptions regarding the use of CSS.

The order of the style and link elements in the HEAD section of the HTML/XHTML matters

Recently I received an anxious phone call from a friend of mine, a web enthusiast. He had a simple document and he had defined an internal stylesheet and an external stylesheet to style the various elements in his document which is not a best practice to say the least…

He wanted to style the H1 elements in his document. So he typed in the HEAD section of the document the following

<style type=”text/css”>

h1{

color:maroon;

}

</style>

just below this statement there was a link to an external stylesheet

<link rel=”stylesheet” type=”text/css” href=”test1.css” />

inside this stylesheet there is the following declaration

h1{

color:aqua;

}

But my friend paid no attention to this…. After all declarations in a style element overwrite those in an external stylesheet. Much to his surprise when he viewed the page with IE,Firefox,Opera he saw that the color of the H1 tags was “aqua” instead of “maroon” which was specified in the internal stylesheet. What happened is this. It is true that internal stylesheet’s property values overwrite those values for the same element in an external stylsheet but only when the <style></style> tags are specified after the <link rel=….> element. In our case the <link element …> is specified after and that is why the values of the external link prevail.

Be careful of the shorthand notation

When we want to specify values for related properties of a particular element we can do so in a single declaration.

for example we can do this

margin: 1em 3em 4em 5em;

This is equivalent with this

margin-top: 1em;

margin-right: 3em;

margin-bottom: 4em;

margin-left: 5em;

a very common mistake is to presume that if we leave blank(not set a value) this will result to 0em=0.

well if you write this (and please remember that we go from top->right->bottom->left)

margin: 1em 3em 4em;

the missing side is assigned the same value as the one opposite it. So in this case with the shorthand notation used above we have

margin-top: 1em;

margin-right: 3em;

margin-bottom: 4em;

margin-left: 3em;

The margin-left value is equal to 3em and not to zero.

Let’s see another example that falls in the same category. I use all the time the shorthand notation to specify values for the background property.

for example

background: #000 url(myimage.jpg) no-repeat fixed left top;

this is of course equivalent  with this

background-color: #000;

background-image:url(myimage.jpg);

background-repeat:no-repeat;

background-attachment:fixed;

background-position:left top;

Please try to use this order as it was presented here. Some people think if we omit one value in the shorthand notation, that means that simply there is no value for this property. Well, this is not the case.The initial value will be assigned to the missing property.

Initial value is the value for a property when there in no value specified for that property and it is not inherited. The initial value for each property is specified in the CSS specification.

so for the property in question ,background, the initial values for the

background-color:transparent;

background-repeat:repeat;

background-attachment:scroll;

background-position: 0% 0%;

If you write for example

background-color:#000;

background:url(myimage.jpg);

The background color will not be black, because this value #000 will be overwritten in the shorthand notation by this value background-color:transparent;

So, do not mix shorthand and standard notation.

Do not omit the Doctype declaration

If you omit the doctype declaration, e.g

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

<html xmlns=”http://www.w3.org/1999/xhtml“>

the browser will always render the document in quirks mode and in most cases we do not want that.

By rendering in the quirks mode we will see our web site showing in a way we do not want.

For example the Internet Explorer 5 box model will kick off instead of the normal CSS box model and all the dimensions will be calculated according to this model and not the CSS box model as it was defined in the CSS2.1 specification.

All modern editors like Dreamweaver add this in the top of the HTML document.

Some people believe if they just add this

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”>

without adding this line

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

the browser will render in standards mode. No, it will render in quirks mode.

Be careful with case sensitivity

CSS is case insensitive according to the CSS specification. If we have a closer look to these specs we will see that cannot control the document markup and how case sensitivity is handled from the mark up point of view. HTML is case insensitive but the id and class attributes are not. XHTML, being XML, is always case sensitive.

so if we write in our external css file

p{color:#ff0;}

that will match all elements in an HTML mark up that has <p>…</p> , <P>…</P> tags.

but if we write in our external css file

.special {color:navy;}

and type in our document <p class=”SPECIAL”>hello</P>, the color navy will not be applied to our paragraph, since the id,class attributes are case sensitive. In order to avoid all confusion please be consistent with your case matching. i write all tags in html/xhtml in lowercase and i follow the same technique in my css document.

Do not quote attribute-property values

Lots of times i see CSS beginners, writing these CSS statements

p{color:”navy”;} or h1{font-size:”2.2em”}

It will not work and will cause you some unwanted frustration.

Do not leave whitespace between the number and the unit

If you type this css statement h1{font-size:2.3 em} it will not work because there is a whitespace between 2.3 and em.

Do not leave whitespace between the dot and the class name. the same goes for id selectors

This notation in a css file will not work

. special or # wrapper

make sure you do not leave any spaces between the class/id selector name and the dot(.) or hash(#).

Use relative and absolute values correctly

Use mm,cm,in(inches),pt(points),pc(picas) when you specify styles for the print media. On the other hand use relative units like em,ex,px when you specify styles for on-screen display.  Nothing will crash if you do otherwise but it is almost certain that you will create illegble output.

Do not use color-system color keywords

It is always better to use this kind of notation when we want to specify color for our elements

1) color:#ff0000; or the equivalent color:#f00;

2) color:rgb(23, 156, 234);

3) color:rgb(12%, 35% , 67%);

do not use the color keywords like gray,lime,maroon or system colors like buttonface,buttontext.

Our markup will display differently between various browsers when using color or system color names.

The at rules @charset,@import must be the first things in a CSS file

When using the @charset or @import at rules make sure they are the first lines in the css file otherwise they will be ignored.

so if you write this inside your css file

html

{

font-size:1.2em;

color:#000;

}

and then

@import url(“style.css”)

the above at-rule will be ignored.

and do not use the @page rule. it is not supported at all in all browsers.

Be careful when you use the :focus and the :lang pseudo class

If you use the :focus pseudo class make sure you understand that IE 7 and earlier versions do not support it or implement it in a buggy way. IE 5.5 and IE 6 for example  when they encounter a css file with the :focus pseudo class they apply the values that are specified in the :active pseudo class!!!

In IE 8.0, :focus it will be fully supported. The :lang pseudo class is not supported in version IE7 and earlier versions. It will be supported in IE 8.

Be careful when you use the inherit keyword

First of all for versions of Internet Explorer up to version 7 the inherit keyword is not supported.

when using the background property for example and using the shorthand notation you cannot use the inherit keyword.

the followinf css snippet is invalid

#wrapper {

background:#67aacc inherit right top;

}

Be careful of the font-size property and inheritance

If you write the following HTML markup

<div id=”content”>

hello

<p>click <a href=”http://www.microsoft.com”>here</a> to visit the microsoft website</p>

</div>

and style the above markup with this css snippet

#content,p,a{

font-size:190%;

}

we will not have all the elements (div,p,a) with a font size with 1.9 bigger than the normal font-size.

The font-size property is inherited. But writing the CSS like before we will have a markup that has a p element 1.9 bigger than its parent element (div element) and an a element that is 1.9 times bigger than its parent element(p tag).

If you want to have all elements(children element) of the div element to have the same font-size you must rewrite the CSS like this

#content{

font-size:190%;

}

Please be careful with nested elements and inherited properties , especially with tables,cells and rows….

Stay clear of the Media Queries

In CSS3 specification media queries are defined, which give us extra power when it comes to the control we have with CSS over how our content is rendered accross different devices.Basically media queries are logical expressions that evaluate true or false. They are used with conjuction with media types (e.g screen).

if you need to have a look at all the properties and respective values browse here

http://www.w3.org/TR/css3-mediaqueries/

Well, no modern browsers supports these new specs. So do not use them…. There is some partial support from Opera 9 and Safari 3 but still, do not use them

Avoid the vendor specific properties

Try not to use properties that are only operational and target a speficic bwowser like Firefox or Internet Explorer, unless there is absolutely no other way..

Add to FacebookAdd to NewsvineAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to Ma.gnoliaAdd to TechnoratiAdd to Furl

Javascript Query Selectors and the Selectors API September 20, 2008

Posted by fofo in Javascript, XHTML.
Tags: , ,
1 comment so far

When using Javascript one of the most common tasks is to use the DOM to obtain references to the various HTML elements. The only way to accomplish that with the DOM Level 2 API was to use either document.getElementByid or document.getElementsByTagName.  With CSS we can have selectors that match HTML elements. Web browsers can see this matching and implement it. So the question was “Why can’t i do that with Javascript?”. The latest development in the DOM world is the W3C Selectors API .

This new selector API defines the querySelector, and querySelectorAll methods that take a CSS selector string and return the first matching element or a StaticNodeList of matching elements, respectively. The methods can be called from the document object.I will demonstrate the new methods of the W3C with an example.

Just copy and paste the 2 HTML code snippets below in 2 different .html files in your desktop. Then open them with IE and hit the button.

Imagine if we have a very simple HTML document and we want to access an HTML element and change its font size by clicking a button.

 Using only the APIs from DOM Level 2, we use the getElementById method.

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<HTML>
<HEAD>
<TITLE>setFontSize</TITLE>
<SCRIPT TYPE=”text/javascript”>
<!–
function setFontSize(){
    document.getElementById(‘test1′).style.fontSize = ‘200px';
}
//–>
</SCRIPT>
</HEAD>
<BODY>
<p ID=”test”>Hi</p>
<p ID=”test1″>Hello there</p>
<FORM>
<INPUT TYPE=”button” VALUE=”change Size” onClick=”setFontSize()”>
</FORM>
</BODY>
</HTML>

 

and now using the Selectors API and the querySelector method.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>
<html>
<HEAD>
<TITLE>setFontSize</TITLE>
<SCRIPT TYPE=”text/javascript”>
<!–
function setFontSize(){
 
 var myitem = document.querySelector(‘#test1′);
 myitem.style.fontSize=’200px';
}
//–>
</SCRIPT>
</HEAD>
<BODY>
<p ID=”test”>Hi</p>
<p ID=”test1″>Hello there</p>
<FORM>
<INPUT TYPE=”button” VALUE=”change Size” onClick=”setFontSize()”>
</FORM>
</BODY>
</HTML>

Safari 3.1, Internet Explorer 8 beta and Firefox 3.1 alpha1,support the Selector API.Opera is going to add support for this API very soon.

Add to FacebookAdd to NewsvineAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to Ma.gnoliaAdd to TechnoratiAdd to Furl

Microsoft announced that IE 8 will render in standards mode March 13, 2008

Posted by fofo in Internet Explorer.
Tags: , , ,
add a comment

Microsoft had a sudden change of heart (and mind) regarding the way the new IE 8 will render a web page.

Initially MS announced that IE 8 will support version targeting. What MS was proposing in simple words is this:

 If a web developer created a well-formed document with a strict DOCTYPE, IE 8 will behave exactly as its predecessor and render it according to IE 7 standards.

Initially the web page would be rendered in IE 8 standards mode and only if the developers explicitly asked in their pages that they wanted the page to be rendered in IE 8 standard mode, the browser would do so.

The tag that should be used is the head area of the document is this:

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

The web developers were not impressed.

Now it has been decided that by default, IE 8 will interpret web content in the most standards compliant way it can.

Microsoft listened to the community that voiced its concerns and changed its initial plans and now we are moving towards to a more web standards compliant world.

IE8 is currently in its beta 1 form.

People in the IE developer team have created a product that has much greater support for Cascading Style Sheets (CSS).  There is also a significant gain in performance and compatibility with Document Object Model (DOM) standards.  

To see a list of all the CSS improvements made in IE 8 click here

There are many more improvements for developers in IE8.

  • The IE Developer Toolbar has been greatly enhanced. The toolbar is now built into the browser
  • Microsoft has fixed the notorious circular reference memory leak, which drove crazy the javascript developers 
  • The (DOM) ,is much more standards compliant, bringing it up to the same level found in the other major browsers.

All the imporevements in the IE 8 can be found here 

Follow

Get every new post delivered to your Inbox.

Join 1,788 other followers