CSS, JavaScript and XHTML Explained

6 Firefox 3.5 updates of interest June 30, 2009

Firefox 3.5 CSS 3 Selector Support

Firefox 3.5 was released today. Like the beta version that I tested a few months ago, FF3.5 supports all CSS3 selectors. See the CSS3 Browser support grid. This is great news, and makes us all tingly and happy, except for one thing: it means the CSS Google Chrome hack I wrote about in September also hits Firefox 3.5.

I did update the CSS3 Browser support grid to reflect Firefox 3.5 general release. All you’ll see is the pretty shade of green for FF3.5 as it does support all the CSS2.1 and CSS3 selectors.

Firefox 3.5 CSS & HTML Features

1. @font-face

   The @font-face declaration (it’s not really a property, but rather like a download) allows you to define a font face, download that font face, and then use the font family name in other font family property value declarations throughout your site.

   @font-face {
     font-family: <a-remote-font-name>;
     src: <source> [,<source>]*;
     [font-weight: <weight>];
     [font-style: <style>];
   }
   

2. media type

   Before you could target on limited criteria, such as screen, all, print. Firefox 3.5 supports more specific media queries, such as serving CSS based on color-index, device-aspect-ratio, device height and/or width, orientation, resolution, among others. We learned about some of these techniques in iphone CSS. In other words, very cool new feature for FF, but already mostly supported in Webkit, so this won’t make a good way to target just FF3.5, but it is a great way to target different devices. In addition, FF3.5 supports logical operators within the media type declaration, which is not supported by older browsers, so a hack may be coming soon.

   @media screen and (min-width: 600px) and (max-width: 800px) // low resolution laptop?
   <link rel="stylesheet" media="print and (min-width: 11in)"... // landscape printing

3. HTML 5 Features supported in Firefox 3.5

   Firefox 3.5 supports for the HTML 5 audio and video elements, offline resources and a HTML 5 drag and drop API supporting for drag and drop within and between web sites. Firefox 3.5 has improved support for canvas

Firefox 3.5 CSS2.1 and CSS3 New Features and Failure’s

Firefox 3.5 has made some improvements, but still has a way to go in supporting CSS: both CSS3 and CSS2.1. In addition to the support for @font-face and more media specificity, according to the Mozilla site, they have made improvements in the following areas (I’ll update here and on the CSS Properties and Values grid after I do more testing):

4. :before and :after updated to CSS 2.1 specs

   The :before and :after pseudo-elements did not have full CSS 2.1 support for positioning, float, list-style-*, and some display properties. see CSS Properties and Values grid. I still see some issues with this, but my CSS isn’t totally valid in my test… so need to test further.

5. opacity, text-shadow, word-wrap

   While these CSS3 (and in the case of text-shadow, 2.0 too) properties enjoyed some support in prior versions of Firefox, you no longer have to include the -moz extension in front of these three properties.

6. CSS3 properties with the -moz- extension

   -moz-box-shadow, -moz-border-image, -moz-column-rule, -moz-column-rule-width, -moz-column-rule-style, and -moz-column-rule-color are now supported in FF3.5

I still haven’t done much testing, but thought I would throw what is already known out there. I’ll be updating this page and the CSS properties and values grid when life gives me a chance.

Cheers-

-Estelle

90 CSS Properties, Values and Browser Support May 29, 2009

CSS Properties Index

Below is every CSS 2.1 Property, all the possible values for that propery, and the support for each property value from grade-A browsers

This is a work still in progress (i.e. unfinished) , but if you find a mistake, please let me know. Scroll on the table to see all the properties. Note, this was done with Opera 9.64, and FF 3.5, so I am currently updating those too. Also, if you hover over some of the yellow delta’s, some have title tags that explain how they work or fail.

Notes

• Level of support for property is based on CSS2.1. So, if a browser supports all of CSS2.1 but not CSS3, they will get be listed as supporting the property.
• Browsers include:
  • IE6
  • IE7
  • IE7 compatibility mode
  • IE8
  • Firefox 3 (some 3.5 beta)
  • Safari 3.2 (some 4 beta)
  • Opera 9.64
• When you hover over the deltas, in standards compliant browsers, informaiton on how the browsers fails to comply with standards should be displayed.
• This is still a work in progress, but it’s pretty far along, so I am posting. It will be updated soon and often until done… then I’ll remove this bullet point.

Key

CSS content, counter-increment & counter-reset May 4, 2009

I have never used the counter or increment properties since they aren’t supported in IE7 or earlier, nor are the :before pseudo elements, or content property. Since IE8 does support all of these, soon we may be able to include these CSS properties, so I thought I would explain them.

The <ol> start attribute and <li> value element were deprecated in HTML 4.01 and not supported in XHTML strict. The value attribute set the number of a list item, enabling the following list items to increment from that value. While there is no (X)HTML replacement for these elements, CSS 2.1 provides methods for setting and incrementing counters on any element, not just <li>’s. This article focuses on the following CSS pseudo elements and properties:

• content CSS property
• :before pseudo-element
• :after pseudo-element
• counter-increment CSS property
• counter-reset CSS property

The content property is used in conjunction with the :before or :after pseudo-elements. The value of the content property is added to the visual layout of your document, but is NOT added to the DOM. If you’re reading this tutorial, you should already know that! We’re discussing :before, :after and content here because without them, the counter is kind of useless: if you’re not going to display the content of a counter before (or perhaps after) an element, why include it?

Overview of content property

To make understanding this tutorial easier, we are going to use the concrete example of adding ” - <hrefValue>” after every link, which is helpful when using print CSS.

<ul id="showlinkafterlink">
  <li><a href="http://www.yahoo.com">Yahoo</a></li>
  <li><a href="http://www.google.com">Google</a></li>
  <li><a href="http://evotech.net/blog">CSS, JavaScript and XHTML explained</a></li>
</ul>

• Yahoo
• Google
• CSS, JavaScript and XHTML explained

Listing 1: Without any CSS, this is how the code above looks

#showlinkafterlink a:after {
    content: "  - <" attr(href) ">";
    }

• Yahoo
• Google
• CSS, JavaScript and XHTML explained

Listing 2: If you are using a standards compliant browser (i.e. NOT IE6 or IE7), the above should have the hrefs following the links.

A few things to note about the content rendered via the content property:

• Generated content does not alter the document tree. The content is rendered only: it doesn’t appear in the DOM tree, altering the presentation only, not the document
• To control the appearance of the generated content, you can use other CSS properties. All properties in the :after declaration impact the generated content.
• In case you were wondering, you can only add one pseudo-element per side of your element. element:before:before does not work.

#showlinkafterlink a:after {
    content: "  - <" attr(href) ">";
    color: #ff0000;	 font-style: italic;
    }

• Yahoo
• Google
• CSS, JavaScript and XHTML explained

Listing 3: Here we’ve defined the color and font-style for the generated content.

While the generated content is NOT added to the DOM, think of it as an added span that inherits everything from it’s parent. The content cannot contain any HTML, just ASCII, escaped and ISO characters. As mentioned, content is used with the :before and :after pseudo-elements to generate content in a document.

Values of the CSS content property

The CSS content property can take as its value none | normal | <string> | url | open-quote | close-quote | no-open-quote | no-close-quote | attr(attribute) | counter(name[, style]). Values have the following meanings:

• content: none;

  none: The pseudo-element is not generated.

• content: normal;

  normal: Computes to ‘none’ for the :before and :after pseudo-elements unless the default browser rendering includes content (i.e. <q>) which is handled differently based on the browser - Safari shows the default content, IE8 and FF do not.

• content: "Estelle: ";content: "\00a3 "; /* includes '£' */

  string: Adds a string before or after the element (depending on which pseudo-element is used). Strings can either be written with double or single quotes. If your string includes a quotation mark, make sure you escape it with a slash-quote or slash-ISO value. If you are going to include any non-ASCII characters or entities, declare the charset in your CSS and XHTML, and/or use the ISO code for the character. Check out my blog post on including named entities in CSS and Javascript

• content: url(myBullet.gif);

  url: The value is a URI that designates an external resource (such as an image). If the browser can’t display the resource, FF and IE8 omit it, as if it were not specified, but Safari indicates that the resource cannot be displayed with a missing image icon.

• content: open-quote;

  open-quote and close-quote: These values are replaced by the appropriate string from the ‘quotes’ property. Opera handles this, but does not nest quotes correctly, Safari ignores this completely. IE8 and Firefox get it right.

• content: open-quote;

  no-open-quote and no-close-quote: Introduces no content, but increments (decrements) the level of nesting for quotes. Safari ignores this completely. Opera, IE8 and Firefox get it right.

• content: attr(title);

  attr(x): This function returns as a string the value of attribute X for the subject of the selector. The string is not parsed by the CSS processor. If the subject of the selector doesn’t have an attribute X, an empty string is returned. The case-sensitivity of attribute names depends on the document language.

  For uber coolness, or geekiness as the case may be, you can add text dynamically without using javascript.

  a.tooltip {
    position: relative;
  }
  a.tooltip:hover:after {
    content: attr(title);
    position:absolute;
    display:block;
    padding: 5px;
    border: 1px solid #f00;
    background-color: #dedede;
  }

• content: counter(subtitles, decimal);content: counter(headers) "." counter(subtitles) ": ";

  
  counter(name) or counter(name, style): The counter takes two parameters: the name, which you can reference to increment or reset, and the style, which, if not declared, defaults to “decimal”. While you can name the counter almost anything except ‘none’, ‘inherit’ or ‘initial’, avoid key terms.

Browser support for the CSS content property and :before and :after pseudo elements

counter-increment and counter-reset CSS properties

Counters don’t work on their own! if you just write p:before {content: counter(subtitles, decimal);} every paragraph will have a zero in front of it. To more easily understand this, let’s think of real world examples:

• footnotes
• creating numbering for outlines: counting chapters, sections and subsections, restarting the subsection counter for each new section, and resetting the section counter for each new chapter

Using the CSS counter syntax you can define as many counters as you like in your page, increment the counters and reset the counters. While the counter gets physically added to the presentation of the page (not the DOM) using the CSS counter value on the content property as a pseudo element using the :before or :after syntax, the increment happens on an actual element on the page.

<p> With this paragraph, I have included <cite class="footnote">citation to footnote</cite>.</p>

cite.footnote {counter-increment: citations;}

cite.footnote:after {content: counter(citations); vertical-align:text-top;}

In our example above, we would increment the counter on every <cite class="footnote">, then add the footnote numbers using the content property on the :after pseudo element. In order to use a counter, you should give it a name. In the above scenario, the name is “citations”. You can also specify the style. If the style is not declared, the style defaults to decimal. The values include all the list-style-type values, though only <ol> values make sense with a counter. Values include decimal | decimal-leading-zero | lower-alpha | lower-greek | lower-roman | upper-alpha | upper-roman | lower-latin | upper-latin | hebrew | georgian and others.

You can include more than one counter in generated content. For example, in legalese, you often have sections within sections all numbered. This is doable with CSS counters.

<h1>First Header</h1>
<h2>subsection</h2>
<p>text....</p>
<h2>another subsection</h2>
<p>text....</p>
<h2>yet another subsection</h2>
<p>more text....</p>
<h1>Another Header</h1>
<h2>subsection</h2>
<p>text....</p>
<h2>another subsection</h2>
<p>text....</p>
<h2>yet another subsection</h2>
<p>more text....</p>

To add counters in front of every h1, with counters on the h2s that reset after each h1, the CSS would look like:

h1 {
	counter-increment: headers;
	counter-reset: subsections;
	}
h1:before {
	content: counter(headers, upper-roman);
	}
h2 {
	counter-increment:subsections;
}
h2:before {
	content: counter(headers, upper-roman) "." counter(subsections, lower-roman) ":";
	}

Now all <h2>s are preceded by their header number and subsection number.

A few things to note about the code: note that in the h2:before declaration we’ve included two counters: the header counter and the subsection counter. We declared the style in both calls, as style is NOT inherited. Also, we’ve included strings within our declaration. Note that there are quotes delimiting our strings, but not our counters, and there are no concatenation elements without our content value. To combine multiple counter ID’s in the same style attribute, string them together using space delimited counter ID values.

Incrementing of the counter was done through the counter-increment declaration. While the default value is to increment by 1, we can increment by other values. You can also reset counters. It makes sense to reset subsections after every header. To overwrite the default value of 1, and to reset after each <h1> the CSS could be:

h1 {
  counter-increment: headers 10;
  counter-reset: subsections 5;
}
h2 {
  counter-increment:subsections 2;
}

22 Questions to Ask Before Developing a Website April 29, 2009

I developed this “Website Development Questionnaire” in 2002. It is old, but it still serves me well, so I thought I would share. I don’t actually add the bold or italic sections below. Those were added here to help you understand the rationale for the questions:


1) Corporate Identity: Corporate Information (for site development):
Company Name (Legal)
Company Name (Branding)
Company Tag Line:
Company Phone Number
Company Fax Number
Address:
Other contact information
Business hours of operation (store hours / when phones will be answered, if relevant)

2) Domain Names and Hosting:
Main Domain Name:
What other domain names do you own?
Do you have web hosting? If so, what type (IIS, Apache?)

3) Briefly describe what your company does:

4) Adjectives: Please list 5 (or more) adjectives that you think describe your company or should describe your company in order of relevance / importance

This information is used to get a sense for design, and to help in SEO

5) Competitors: Are there any websites that you would consider your “competition”? Feel free to provide more information on how they are your “competition”, but, at minimum, provide for each competitor, include the company name, web address, and a list of “keyterms” that describe what they do and/or sell.

In addition to getting a good look at what key terms they may be targeting, I take a look at these sites to get an idea of the features they may need, target audiences we should be considering, and what the competition will be like in terms of SEO

6) Favorite Sites: Please list 5 websites you like. Include the URL, what you like about each site, and what you would improve upon.

These sites don’t have to be in the same business realm. By getting sites they like, i get a good feeling for their design sense. By finding out what they would improve upon, you learn alot more about what they are looking for in their site.

7) Least favorite sites: Please list 5 websites you don’t like, Include the URL. What don’t you like about these sites? What redeeming qualities to they have?

The pitfalls they list tells you what you need to avoid. Though redeeming qualities are rarely included when clients fill out this list, I get a good sense of what they like when they do answer that question. I usually find that the redeeming qualities from this answer helps me understand better their answer to question 6 above.

Products / Services: List the top ten products / services you provide

This should be redundant to the answer of question 5. If it’s not, I usually have to do some business development with the client to get them to focus the purpose of their site. I ask this question this way as well because I don’t want to start developing a site for a client if they haven’t finished developing their business strategy.

9) Selling points: Tell us why you, your products or your services are better than your competition (both online competitors from question 3, and offline competition)

10) User goals: Why do you think people will visit your site? When people don’t know you exist, why would they find you or happen upon your site? Why would they come back? If they do know you, why would they take the time to visit your site?

Most clients think users will just come to their site. This question helps them focus on why an average Jane or John Doe may end up on their site. Many brochure sites get most of their visits from people looking for an address or phone number. You can create a one page website for that. This helps the client focus on what the site’s real goals should be.

11) Target Audience: What types of visitors do you want to get? Who is your target audience? (age, education, and other demographics? Job status? Economic status? Role in the community?) Describe your “average” visitor as best you can.

The layout targeting a Japanese middle school students will be very different from a site targeting rural agricultural workers or British graduate school applicants. Knowing your target audience, their culture, their technical savvy, and their internet expectations can help you design your page in terms of look and feel and help you determine site functionality and user experience design

12) Secondary Audience: What other visitors is your site going to get? Job seekers? Board members?

This helps me determine what additional pages to include in a site. Your client may be a sole proprietor, but they may want to hire, incorporate and/or get venture capital funding. Making sure your site can grow to accommodate future features is important. Thinking about those potential features before beginning the design process give you an added edge.

13) Technical: How technically savvy is your average visitor?

14) Accessibility & Usability: Will web visitors have any special needs? (eyesight, language, mobility, reading level?)

15) Site Purpose: What do you want the visitor in question 11 (and 12) to do when they get to your site? What are your goals for the web site in terms of visitor actions? What do you think your site visitor should accomplish on your site?

16) Site Goals: What are your goals for the web site in terms of you company goals? How is your site supposed to help your business? What is the purpose of your site?

17) Site Analytics: What are your goals for the web site in terms of popularity and virality? What type of exposure do you anticipate your website, when “successful” should achieve?

This question has dual purposes: The first is to help set numeric goals for the site that can be tested with common analytics. The second is to guage the sense of reality of the client: if they expect to reach 1,000,000 page views their first month, they’ll let you know their expectations via this question. This is the time to take some sense into them so they aren’t disappointed and don’t set their expectations too high

18) Site Features: What features do you think your website should include? (calendar, forum, login, price comparison chart, contact form, anything?)
For each feature, please state the goal of said feature.

Some clients want the moon. By stating the goal of each feature, they may realize they don’t need the moon. Other clients have no clue what is available to them. They never ask for a contact form at the initial contact, but i have yet to have a sole proprietor client who doesn’t want a contact form after reading this questionnaire they just never thought of it. This question helps define which features are necessary even if they weren’t originally thought of, and which ones sounded good originally, but really won’t help.

19) Site No Nos: Do you have any definite remarks on what you DON’T want to have on your website? (Flash, splash page, the color pink?) Sharing why you don’t want a feature will help me get an understanding of your user experience tastes, so feel free to elaborate.

This question is really helpful as is. Adding the examples has helped me explain against the dreaded splash page.

20) Other: Anything else I should know?

21) Product Manager: Company Contact(s) Information for web decisions:
Primary Contact Name:
Contact Email Address:
Contact Phone:

Secondary Contact Name:
Contact Email Address:
Contact Phone:

Other contact information

22) Billing Contact: Company contact information for Contracts & Billing:
Name:
Department:
Address:
Phone:
Fax:
Email:
Other contact information

Always know who is going to pay you before you start working

IE8 - What you need to know March 19, 2009

IE8 CSS Support and Rendering Mode, IE8 debugging, etc.

• IE8 and CSS
• IE8 compliance mode / preventing IE7 rendering in the IE8 browser
• IE8 bugs
  
• Differences between IE7 compatibility mode and IE8
• IE8 CSS Hack
• IE8 Developer Toolbar (or Firebug for IE8)

IE8 and CSS

IE8 came out today. I appended the CSS selector browser support blog post to include IE8 CSS Selector support and IE7 compliance mode CSS Selector support. Most notable is that IE8 Supports all of CSS2.1 and passes the Acid 2 test.

IE8 compliance mode / preventing IE7 rendering in the IE8 browser

Important to know is that IE8 has a button that allows users to render your page in IE7. If that button is clicked enough, your page will always render in IE7 for everyone (not just those who clicked the button). So, do you have to test your pages in IE8 in IE7 mode? No, you don’t. To ensure that your page is not rendered in IE7 mode inside the IE8 browser add the following meta tag to your pages:

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

Alternatively, if you want your pages to render in IE7 mode you can write: <meta http-equiv="X-UA-Compatible" content="IE=7" />. The issue with this is that IE7 rendering in IE8 is not identical to plain IE7. So, I recommend against using this meta tag.

So, to ensure that you DON’T have to test in IE7, IE8 and IE8 in IE7 mode, add the code above.

To learn more about what IE8 supports, check out IE8 CSS Selector support.

IE8 bugs

IE8 JavaScript Bug: Apparently IE8 doesn’t much care for prototype and prototip. I think it’s an issue with className that causes IE8 to choke. In the meantime, if you are using Ruby on Rails, then you’re probably using prototype.js. And, if you’re using prototype.js, then IE8 chokes, so you have to use the meta tag. And, if you use the
<meta http-equiv="X-UA-Compatible" content="IE=7" /> tag, make sure it’s the FIRST thing on your page, because IE8 suck ass, just like IE7 and IE6.

If you’re more of an ASP.net fan (which I am NOT!), there is another issue with menus not showing. Mark Hidreth explains it in his blog., but in short, the solution is to add a z-index of greater than zero to <asp:Menu>. Thanks to Attiq Jafar for alerting me to this bug and solution.

IE8 Disappearing Page Bug: If you put two adjacent nodes, both positioned absolutely, and set only one of x- or y- positioning, you may get a blank page.

Differences between IE7 compatibility mode and IE8

These are just a few differences that I have found so far. Please do NOT consider this an exhaustive list

1. default padding on <p> is not equal
2. table { border-collapse: collapse;} is NOT rendered the same. If dashed, IE8 is properly dotted or dashed, whereas IE7 overlays the lines and it looks ugly, and otherwise does not collapse
3. border bottoms on an inline element will not display in IE7 if the border is the lowest part of the page. The page will not grow to include the border, unless the bordered element is block. IE8 will grow.
4. border: hidden; IE7 does NOT understand the value of hidden for the border property.
5. border-style: outset The coloring is different for IE7 than IE8. IE7 is darker on the bottom/right. IE8 has the darker color on the top/left. Groove and
6. RGB - IE7 displays RGB mixed number types: The spec states that values for RGB should be three integers or three percentages, but not a combo of the two. (IE7 and IE6 display mixed types. IE8 and standards compliant browsers dow not render colors with mixed value types.
7. IE8 has support for content:, counter-increment: and counter-reset: IE7 doesn’t!
8. Empty declarations overide in IE7, but not 8: IE7 will not show a property if there is a malformed declaration after the element. p { color:green; color: } - IE8 will show green. IE7 wont.
9. Identifiers starting with a digit or non-letter character followed by a digit: Identifiers starting with dash-number choke IE7: If there is a series of classes or ids listed, including ones that start with a dash followed my an integer, IE7 will choke, and ignore all the selectors in the series. For example,

   .-3myClass, .blue {color: blue;}
   #-3myClass, .blue {color: blue;}
   .3myClass, .blue {color: blue;}
   #3myClass, .blue {color: blue;}

   The element with a class of blue will NOT inherit the blue from either of these declarations

10. @import is not correctly supported in IE7: @import “support/import-coloroveride.css”; (see the one before it for comparison)
11. border-width: thin appears to be 1px wide in IE8 and 2px wide in IE7
12. clearing: if you clear an element in IE7 after a floated element, and the element has a margin top, that will be the space between it and the floated element. In IE8, the margin top will be the space between it and the last non-floated element.
13. box model: Some people believe that IE got the box model right, and the w3c got the box model wrong. IE8 gets the box model right according to the w3c.

IE8 CSS Hack

This IE8 CSS hack uses the star hack to target IE7 and lower, but you can use any other of the many IE hacks to target older IE browseres.

 p.myclass {
     color: green;
     *color: red;
}
body:last-child p.myclass {
     color: blue;
} 

IE8 Developer Toolbar (or Firebug for IE8)

IE8 comes with a developer toolbar. The developer toolbar is definitely more robust than what came with IE7. Similar to Firebug, you highlight an element, and can edit CSS on the fly, but the mechanism is less robust. The CSS module informs you of inherited CSS and current values (in reverse order from Firebug). The CSS panel has check boxes next to each css property so you can turn on and off that property, and you can indeed edit the value or property by clicking on the value or property. You can’t use the up/down arrows like in Firebug, and unlike Firebug, the change isn’t instant: you have to click out of the property to see the change. However, it is definitely an improvement on the previous dev toolbar.

I should probably write a tutorial on this developer toolbar, but I really don’t care enough about this browser to put the effort in to it…. but maybe.

WAI-ARIA: Accessible Rich Internet Applications basics March 14, 2009

<ul role="navigation">

  <li><a href="mypage.html">My Page</li>
  <li>....</li>
</ul>

Note: This blog is still in development, but it’s come a long way, and it is likely already a bit helpful. I will be adding more example snippets and more about live regions and handling dynamic changes, so come back next week if you want to read more. The original post was 03/12/08 but I’ve reposted it since WAI-ARIA is finally being better supported by YUI, Dojo, jQuery, IE8, Safari 4, and other browsers.

CSS Browser Support (iPhone, IE8, IE7 Compliance Mode, FF 3.5 beta & Safari 4 Beta included) February 24, 2009

Note: This article is about CSS selectors. I also have a post on All CSS2.1 Properties and Values, and Broswer Support (huge file, but worth the download time)

Update 6/30/09: Firefox 3.5 was released today. Like Safari 3.1 and newer (including Safari 4 beta), Opera 9.64 and newer and Google Chrome all support ALL CSS2.1 and CSS3 selectors. Here is a breakdown of all the browsers I’ve tested:

• Green / √ means current support.
• Orange / Δ means that the browsers have some support for the selector.
• Red / Χ means that the browser is non-compliant.

CSS Selectors and Browser Support

See also: CSS Properties & Values

IE8 CSS Selector Support

IE8 Supports the CSS2.1 selectors, including pseudoclasses but not pseudo elements. (See Double Colon Notation). IE8 has support for has support for Accessible Rich Internet Applications (ARIA)

To force IE8 to render your page in IE8 compliance mode, include the following meta tag:

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

IE7 within IE8 CSS Selector Support

The CSS selector support of IE7 within IE8 (when IE8 displayes a page in IE7 compatibility mode) is identical to IE7 as a standalone. However, the CSS properties do render differently. I will have to blog about that in a seperate entry when I get around to garnering all the differences.

IE7 within IE8 understands the IE7 star hack. Because the CSS renders differently even though the selector support is the same, it may take a bit before I figure out the best filter.

iPhone

The original version of the iPhone came with a Safari browser that did not support all CSS3 selectors. The currently active version of Safari on the iPhone does support all CSS3 selectors. The grid below has been updated to reflect that. I have kept the old version of the iPhone CSS3 support just in case you want to support "unlocked" version of the iPhone, that do not get updated as often. Personally, I assume all iphones hitting my apps support all CSS3. For more information on iPhones, see iPhone CSS Support

Safari 4 Beta CSS Selector Support

Safari 4.0 Beta was released Feb. 24, 2008. Since Safari 3.2 supported all CSS selectors, this Safari 4 part of the post may be a bit mute. Safari 4 beta also supports ARIA and for CSS effects, animation and canvas. It also seems to have many more native debugging tools native to the application (or maybe what I see is a carry over from the tools I installed in my previous version of Safari). Safari 4 is Acid 3 compliant!

IE8 Notes:

• E[attr]Does not match the attribute when the attribute value is empty or not written correctly.

IE7 within IE8 Notes:

• E[attr] Same as IE8, does not match the attribute when the attribute value is empty or not written correctly.
• E[attr~=val]Only issue is that for this selector to work, the value of the attribute is case sensitive
• E[attr|=val]IE7 has some case sensitivity issues, but generally works.
• :first-child IE7 considers a comment or a text node as a first-child, when it shouldn’t: only elements should be considered children. So, IE7 matches the first comment instead of the first child. If it sees text or a comment as the first child, it will not consider the first element as the first child.

Canonical tag for SEO February 12, 2009

Google, Yahoo and Microsoft are now supporting the canonical meta tag as the standard for identifying the actual source of your content: the real URL that you want to recieve page rank for your key terms.

Many sites have the same content show up with different URLs due to search features, dynamically generated URLS, tags, etc. Google, Yahoo and other search engines have been knocking your sites for having duplicate content as if you were spamming your terms. In other words, having multiple URLs pointing to the same content has been hurting your page rank and your site.

Now you have a way to make sure that your multiple content helps you instead of hurts you.

Implementing the CANONICAL meta tag

1. Pick one URL for your page - “the pretty, preferred or canonical URL” (to quote Matt Cutts). For example, this page’s main, or canonical, URL is http://www.evotech.net/blog/2009/02/canonical-tag-for-seo/, though you may find it thru http://www.evotech.net/blog/?p=69 or http://www.evotech.net/blog/?s=SEO, http://www.evotech.net/blog/category/seo/ or simply http://www.evotech.net/blog.
2. Figure out how to include your page’s main URL in pages that are dynamically generated. For example, I need to figure out how to include my primary URL - http://www.evotech.net/blog/2009/02/canonical-tag-for-seo/- in the web page showing this content no matter which URL from the bullet point above is shown.
3. Once you know how to get the URL you picked in step 1 into your possible other pages feeding the content from your main URL, place the canonical link tag inside the tag with the main content’s URL. For this example, I would place: <link rel=”canonical” href=”http://www.evotech.net/blog/2009/02/canonical-tag-for-seo/” /> in my header.

The syntax is similar to the stylesheet link tag:

<link rel=”canonical” href=”http://www.yourdomain.com/yourpage” />

The canonical tag is ONLY for webpages in the same domain. So, http://evotech.net/blog pointing to http://blog.evotech.net or http://www.evotech.net/blog is fine. However, I can’t point http://estelleweyl.com/blog to http://evotech.net/blog if I were to have that URL as an addon domain on this server.

Now I just have to figure out how to do step 2 so I can create canonical links for this blog.

Added Notes:

Lori basically figured it out for us: (copied from http://beedragon.com/wp-test-site/2009/02/13/add-canonical-link/). Thanks!

Add canonical link tag to head

<?php if ( is_single() || is_page() ) { ?>
<link  rel="canonical" href="<?php the_permalink(); ?>" />
<?php } ?>

Occurs to me now that you’d have to hardcode main url, then get the slug and other url info dynamically:

<?php if ( is_single() || is_page() ) { ?>
<link rel="canonical" href="http://mainurl.com/<?php echo the_time('Y'); ?>/<?php echo the_time('m'); ?>/<?php echo the_time('d'); ?>/<?php echo $post->post_name; ?>" />
<?php } ?>

There is probably a prettier and/or more efficient way to do that, but can’t think of one at the moment.

hover pseudoclass for the iPhone December 28, 2008

Since you’re not hovering, there is no hover pseudo class on the iPhone. instead they have touch events. To simulate the :hover pseudo class, include javascript similar to this:

var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
   myLinks[i].addEventListener(’touchstart’, function(){this.className = “hover”;}, false);
   myLinks[i].addEventListener(’touchend’, function(){this.className = “”;}, false);
}

and in your CSS add something similar to:

a:hover, a.hover { /* whatever your hover effect is */ }

Notes:

• onTouchStart is similar to onMouseOver and onTouchEnd is similar to onMouseOut
• You’ll likely want something more complex than simply removing the class on touch end. This is just a very simple example that will replace all classes on all your links with a "hover" class, which is probably not what you want. But you get the idea.
• You can use this on all elements, not just links.

-Estelle Weyl

Note:

• See also Web Development for the iPhone. This is an update to that post.

Browser Testing: 3 tools you can’t live without December 1, 2008

Firefox 2 and Firefox 3 don’t render the same. Also, Firebug 1.0 is less buggy than Firebug 1.2. So, at this point, it really is necessary to run multiple versions of Firefox in your development environment, similar to how most of us have been running IE6 and IE7 on the same machine for years.  What? You haven’t been running IE6 and IE7 on the same machine? Didn’t know it was possible? Here are three tools or links that you need to check out if you do any cross browser testing (which I hope you do).

Here are some links to help you out:

• Multiple Firefox: I have both FF2 and FF3 installed on my laptop. I develop in FF2 with Firebug 1.0, and have FF3 with FB1.2 for testing. Instructions for running multiple Firefox apps on the same box can be found here: http://jeroencoumans.nl/journal/multiple-firefox-versions.
• IE6 on Mac/ IE6 on Linux: I have a mac, so for quick IE6 checks I have IE6 installed in my Mac OSX. This isn’t a perfect rendition of IE6, but it’s good enough for quick tests, not final QA. To install IE6 on your mac, go to http://www.kronenberg.org/ies4osx/
  . I also sometimes work on Ubuntu 9.04 (a linux box), and have IE6 for Linux installed.
• Multiple IEs: To install IE7 and IE6 on your PC, or in your Parallels or VMWare Windows environment on your mac, you must install IE7 as your main IE application, and then you can go to http://tredosoft.com/Multiple_IE to install earlier versions - IE6, and even earlier.It does not support IE7, which is why IE7 (or IE8) needs to be a regular installation. Multiple IEs does NOT work on Vista.

Unfortunately there are a few quirks with running MultipleIE and IE6 on Mac- but I would say MultipleIE matches the crappiness of IE6 at about 99.9%.

These are links that I am always forwarding to people, so I figured I would finally blog them. Cheers!

-Estelle Weyl