Hey there, this site is pretty old now. I've decided to leave it up as I put a lot of work into it and would hate to see it disappear.

Display Tags For 'css3'

Change Text Selection Color Using CSS

Neal Grosskopf
3/9/2008 6:32:41 PM

With the advent of CSS3 there are many new ways to style web pages. One of the new features in CSS3 is the ability to change the highlighting color on web pages using CSS. It seems that many websites ignore this simple to implement feature. By default the color will be inherited by your operating system colors. On Windows Vista the hex. color is #3399ff.

Here's How To Change The Text Selection Color:

::selection { background: red; color: white; } ::-moz-selection { background: red; color: white; }

Notes:

This is currently supported by Firefox and Safari. I would suspect that Opera also supports it. Unfortunately Internet Explorer does not support it, but with IE8 coming out soon supporting CSS better, it may work in there as well.

Sources

Replies:3
Views:8044

Always Show Scrollbars In Firefox Using CSS

Neal Grosskopf
4/30/2008 8:06:46 PM

I remember the first time I used Firefox I was extremely annoyed by the fact that the browser does not always show the scrollbars (like Internet Explorer does). The problem with this is when a page's height is not greater than the available screen height and a users clicks a link to a page that is taller than the available screen height it shifts the entire content area over to accommodate for the scrollbars (which probably take up 15 pixels or so). This is most likely the standards compliant way to display a page and IE has been doing it wrong all along, regardless it is annoying seeing the web page jump back and forth in Firefox.

The Solution:

Fortunately there is a solution using CSS:

html { overflow-y: scroll; }

The Opposite

If the meaning of your life depends on not conforming to Microsoft (you're out there) you can also make IE behave like Firefox:

html { overflow-y: auto; }

Whatever method you prefer I would recommend placing this in your baseline stylesheet before starting a new web site or project. Your users will thank you.

Sources:

Replies:5
Views:11074

Using CSS To Find Broken Links & 404 Pages

Neal Grosskopf
6/7/2008 6:04:25 PM

I recently redesigned my website. In the process of doing that I moved a few pages around to locations that I thought they belonged. The problem I had, like almost every web worker out there is that I ended up with broken links. Usually our html editing software tries it's best to alleviate us of these types of problems but they're never a 100% fix.

CSS Selectors For Finding Broken Links

Then it occurred to me, why not use my CSS to highlight broken links? Here's how.

<a href="/forms/contact.asp">broken link 1</a> <a href="/forms/email.asp">broken link 2</a> a[href="/forms/contact.asp"], a[href="/forms/email.asp"] { border: 5px double red; }

Rationale

This will select any anchor tags where their href attribute equals the 404 broken link page. For those of you using my CSS Diagnostics stylesheet, I used a different border-style here so that we can differentiate between the highlighted elements. This works good and fine but what about those newbie coders at work who still link to pages using "../" or the ones that include the domain name within the link?

Take Two

a[href$="/contact.asp"], a[href$="/email.asp"] { border: 5px double red; } a[href="/pages/contact.asp"], a[href="/pages/email.asp"] { border-width: 0px; }

Rationale

This will first style the suspected broken links using CSS and then de-style the correct links.

Other Uses

This can also be used to style elements that are calling old JavaScript functions:

<a href="#" onclick="old();">Old Function</a> a[onclick*="old()"] { border: 5px dashed red; }

This will search through the entire onclick attribute using the substring selector for "old()". The reason I used the *= select is because sometimes developers place the function call before or after other functions so I need to be a bit less specific.

Notes

Like CSS Diagnostics, you will need to use a standards compliant web browser fully supporting CSS3 selectors. I've found that Firefox seems to be the best browser since it comes with many other developer tools as well.

Replies:0
Views:13766

A Second Look At CSS Diagnostics

Neal Grosskopf
6/18/2008 8:44:34 PM

Earlier this year I wrote an article inspired by Eric Meyer's on CSS Diagnostics: Selecting Deprecated Elements With CSS. The article was a smash, and I my site traffic has gone up like crazy ever since. I was unaware that this niche in the standards community would be so popular. Unfortunately I did not put as much thought into my initial diagnostics other than just trying to improve on Eric's code. Enter part 2.

My IE Has Bugs!

After applying my original diagnostics code to several projects (at work, and on my recent site re-design) I realized that Internet Explorer wasn't quite getting it right. In fact sometimes, IE was selecting incorrect elements. What came from this was I needed to be more careful in the selectors I used and that using the "*" selector resulted in some weird things in IE. What also came from that was a bug in IE that selects the IMG tag when the selector calls for the proprietary IMAGE element.

I decided to go out to the HTML 4.01 specification and find exactly what attributes and elements are deprecated and which aren't. That way I could create a more authentic version of the diagnostics tool rather than just adding my personal opinion on what ought to be deprecated and what shouldn't. This resulted in CSS Diagnostics 2.0.

Diagnostics Gone Famous

For my second rendition of the project, I decided that I should create a Google Code Project and host my diagnostics there. I'm not completely sure if that is a good or bad thing to do. My goals are to keep traffic coming to my own site and not Google's but perhaps the two can live together. I also learned that you can embed the Google Analytics tracking code directly into the Google Code web page thus allowing me to track traffic to that area. This makes me care less about traffic going there because if I can use GA, then I can fell like I actually own those pages.

On to the code:

  1. Highlight Empty Attributes

    I chose some common attributes that people may forget to fill in. Feel free to remove the href="#". I like to use this one because while developing a website, I forget to change # links to their proper pages and this helps me catch them in the copy.

    img[alt=""], area[alt=""], *[class=""], a[href=""], a[href="#"], *[id=""], *[title=""] { border: 5px dotted yellow !important; }
  2. Highlight Proposed Deprecated Attributes

    These are a list of attributes that aren't formally deprecated but I personally believe should be. Generally this is because there is a better alternative such as CSS or using IDs on elements rather than NAME.

    body[background], table[background], td[background], th[background], input[border], table[border], table[cellpadding], table[cellspacing], object[codebase], img[height], object[height], table[height], a[name], form[name], img[name], object[name], a[target], area[target], td[valign], th[valign], img[width], object[width], table[width] { border: 5px dotted orange !important; }
  3. Highlight Deprecated Attributes

    These attributes are officially deprecated by the W3C per the HTML 4.01 specification. If you are using the TRANSITIONAL DTD CSS Diagnostics is a great way to move your code to STRICT. It should also be noted that these should appear AFTER empty, and proposed deprecated elements due to specificity in CSS.

    applet[align], caption[align], div[align], h1[align], h2[align], h3[align], h4[align], h5[align], h6[align], hr[align], iframe[align], img[align], input[align], legend[align], object[align], p[align], table[align], body[alink], applet[alt], applet[archive], body[background], body[bgcolor], td[bgcolor], tr[bgcolor], table[bgcolor], img[border], object[border], br[clear], applet[code], applet[codebase], basefont[color], font[color], dir[compact], dl[compact], menu[compact], ol[compact], ul[compact], basefont[face], font[face], applet[height], td[height], th[height], applet[hspace], img[hspace], object[hspace], script[language], body[link], applet[name], hr[noshade], td[nowrap], th[nowrap], applet[object], isindex[prompt], hr[size], font[size], basefont[size], ol[start], body[text], li[type], ol[type], ul[type], html[version], body[vlink], li[value], applet[vspace], img[vspace], object[vspace], hr[width], td[width], th[width], applet[width], pre[width] { border: 5px dotted red !important; }
  4. Highlight Non-W3C Proprietary HTML Attributes

    These are a list of proprietary HTML attributes. Using these in your code is more offensive than using a deprecated attribute, since these were never warrented by the W3C. Use of these attributes should be avoided at all costs.

    body[bgproperties], *[bordercolor], *[bordercolordark], *[bordercolorlight], body[topmargin], body[rightmargin], body[bottommargin], body[leftmargin], table[frame] { border: 5px dotted magenta !important; }
  5. Highlight Empty Elements

    These selectors will highlight empty elements within your markup. I've commented out a few selectors that I found didn't jive with my personal website but feel free to de-comment these and use them on your website.

    /*span:empty,*/ /*div:empty,*/ li:empty, /*p:empty,*/ td:empty, th:empty { border: 5px solid yellow !important; }
  6. Highlight Proposed Deprecated Elements

    Here is a list of elements I feel should be deprecated. INPUT Types should be deprecated because the BUTTON element is a much better choice and allows for easier selection of all website BUTTONs especially in IE6.

    input[type="button"], input[type="reset"], input[type="submit"], tt, big, small { border: 5px solid orange !important; }
  7. Highlight Deprecated Elements

    These elements are formally deprecated in the HTML 4.01 STRICT specification.

    applet, basefont, center, dir, font, isindex, menu, s, strike, u, listing, plaintext, xmp { border: 5px solid red !important; }
  8. Highlight Non-W3C Proprietary HTML Elements

    All of these elements are proprietary, meaning they are not part of the W3C spec and never have been. They include some of the more infamous elements such as the MARQUEE and the BLINK tags. I've commented out the IMAGE selector because IE7 and under will select the IMG tag as well, so use at your own risk.

    audioscope, bgsound, blink, bq, comment, embed, fn, ilayer, /*image,*/ keygen, layer, limittext, marquee, multicol, nobr, noembed, nolayer, nosmartquotes, rt, ruby, server, sidebar, spacer, wbr, xml, blackface, shadow { border: 5px solid magenta !important }
  9. Highlight XHTML 1.0 Strict Deprecated Attributes

    Since many people use XHTML I read the XHTML spec and threw in a few deprecated attributes specific to XHTML.

    a[name], applet[name], form[name], frame[name], iframe[name], img[name], map[name] { border: 5px dotted lime !important }
  10. Highlight XHTML 1.0 Strict Prohibitions

    There are also prohibitions in XHTML, essentially elements that cannot appear nested inside other elements.

    a > a, pre > img, pre > object, pre > big, pre > small, pre > sub, pre > sup, button > input, button > select, button > textarea, button > label, button > button, button > form, button > fieldset, button > iframe, button > isindex, label > label, form > form { border: 5px solid lime !important }
  11. Highlight Deprecated Classes From Old Version Of Website

    I found this area of CSS Diagnostics especially helpful during my last site re-design. When I re-designed my site, I threw out all my old CSS and started from scratch. What resulted was a lot of left over classes in my markup that was non existent in my external stylesheet. This is a great way to call out those "old" classes that aren't being used anymore.

    .toolbg, .ulnone, span.b, ul.list, .eleven, .lines, .wide, .select, table.form, form td.b, table .top, .gallerypic, .iegallery, .pic, .image, .transparent, .wht, .blk, .blue, .dkgray, .ltgray, .brown, .quote, .greyhover { border: 5px groove red !important; }
  12. Highlight Deprecated JavaScript Functions From Old Version Of Website

    The same can be applied to old JavaScript functions. I found numerous references to old function calls so I devised a way to highlight deprecated JavaScript functions.

    input[onfocus*="normal1px()"], input[onfocus*="change1px()"] { border: 5px dashed red !important; }
  13. Highlight Known 404 Page Links

    Another problem I ran across during my redesign was deleted web pages. I devised a way of highlight known 404 pages using CSS. You can substitute the URLs I have below with you own known 404 pages. A great way to determine 404 pages is to look at your server log files or to use Google Webmaster Tools.

    a[href*="/designs/web/web1/"], a[href*="/designs/web/web2/"], a[href*="/designs/web/web3/"], a[href*="/designs/aitp/aitp-fvtc/"], a[href*="/designs/aitp/aitp/"], a[href*="/forms/contact.asp"], a[href*="/forms/email.asp"] { border: 5px double red !important; }

Putting It All Together:

/* Empty Attributes */ img[alt=""], area[alt=""], *[class=""], a[href=""], a[href="#"], *[id=""], *[title=""] { border: 5px dotted yellow !important; } /* Proposed Deprecation Due To CSS */ body[background], table[background], td[background], th[background], input[border], table[border], table[cellpadding], table[cellspacing], object[codebase], img[height], object[height], table[height], a[name], form[name], img[name], object[name], a[target], area[target], td[valign], th[valign], img[width], object[width], table[width] { border: 5px dotted orange !important; } /* W3C HTML 4 Strict Deprecated Attributes - http://www.w3.org/TR/html401/index/attributes.html */ applet[align], caption[align], div[align], h1[align], h2[align], h3[align], h4[align], h5[align], h6[align], hr[align], iframe[align], img[align], input[align], legend[align], object[align], p[align], table[align], body[alink], applet[alt], applet[archive], body[background], body[bgcolor], td[bgcolor], tr[bgcolor], table[bgcolor], img[border], object[border], br[clear], applet[code], applet[codebase], basefont[color], font[color], dir[compact], dl[compact], menu[compact], ol[compact], ul[compact], basefont[face], font[face], applet[height], td[height], th[height], applet[hspace], img[hspace], object[hspace], script[language], body[link], applet[name], hr[noshade], td[nowrap], th[nowrap], applet[object], isindex[prompt], hr[size], font[size], basefont[size], ol[start], body[text], li[type], ol[type], ul[type], html[version], body[vlink], li[value], applet[vspace], img[vspace], object[vspace], hr[width], td[width], th[width], applet[width], pre[width] { border: 5px dotted red !important; } /* Non W3C Proprietary HTML Attributes - http://en.wikipedia.org/wiki/Non-standard_HTML_tags#Proprietary_HTML_attributes */ body[bgproperties], *[bordercolor], *[bordercolordark], *[bordercolorlight], body[topmargin], body[rightmargin], body[bottommargin], body[leftmargin], table[frame] { border: 5px dotted magenta !important; } /* Empty Elements */ /*span:empty,*/ /*div:empty,*/ li:empty, /*p:empty,*/ td:empty, th:empty { border: 5px solid yellow !important; } /* Proposed Deprecated Elements */ input[type="button"], input[type="reset"], input[type="submit"], tt, big, small { border: 5px solid orange !important; } /* W3C HTML 4 Strict Deprecated Elements - http://www.w3.org/TR/html401/index/elements.html */ applet, basefont, center, dir, font, isindex, menu, s, strike, u, listing, plaintext, xmp { border: 5px solid red !important; } /* Non W3C Proprietary HTML Elements - http://en.wikipedia.org/wiki/Non-standard_HTML_tags */ audioscope, bgsound, blink, bq, comment, embed, fn, ilayer, /*image,*/ keygen, layer, limittext, marquee, multicol, nobr, noembed, nolayer, nosmartquotes, rt, ruby, server, sidebar, spacer, wbr, xml, blackface, shadow { border: 5px solid magenta !important } /* XHTML 1.0 Strict Deprecated Attributes - http://www.w3.org/TR/xhtml1/#h-4.10 - http://www.w3.org/TR/xhtml11/changes.html#a_changes */ a[name], applet[name], form[name], frame[name], iframe[name], img[name], map[name] { border: 5px dotted lime !important } /* XHTML 1.0 Strict Prohibitions http://www.w3.org/TR/xhtml1/#prohibitions */ a > a, pre > img, pre > object, pre > big, pre > small, pre > sub, pre > sup, button > input, button > select, button > textarea, button > label, button > button, button > form, button > fieldset, button > iframe, button > isindex, label > label, form > form { border: 5px solid lime !important } /* Deprecated Classes From Old Website */ .toolbg, .ulnone, span.b, ul.list, .eleven, .lines, .wide, .select, table.form, form td.b, table .top, .gallerypic, .iegallery, .pic, .image, .transparent, .wht, .blk, .blue, .dkgray, .ltgray, .brown, .quote, .greyhover { border: 5px groove red !important; } /* Dreprecated JavaScript From Old Website */ input[onfocus*="normal1px()"], input[onfocus*="change1px()"] { border: 5px dashed red !important; } /* 404 Pages */ a[href*="/designs/web/web1/"], a[href*="/designs/web/web2/"], a[href*="/designs/web/web3/"], a[href*="/designs/aitp/aitp-fvtc/"], a[href*="/designs/aitp/aitp/"], a[href*="/forms/contact.asp"], a[href*="/forms/email.asp"] { border: 5px double red !important; }

Summary:

It is best to use different colors and borders to apply meaning to what error you have made in your code. I like to use yellow for minor, orange for moderate, red for severe, and magenta for extremely severe.

I also like to apply different border styles depending on what the problem may be. Dotted for me means there is a bad attribute, solid means there is a bad element. Other border styles have their own meanings as well.

Considerations:

Make sure to place this at the end of your stylesheet and to leave in the !important rules so that they override any rules that may be inline.

It is also best to use a standards compliant browser when testing. IE7 is ok but I would personally suggest Firefox 3 because it supports standards better and because it has other add-ons that make web development easier and diagnostic testing easier.

Download:

I've set up a Google Code Project so feel free to download it.

Replies:9
Views:24015

CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer

Neal Grosskopf
7/22/2008 7:36:21 PM

While I strongly advise using hacks at a minimum especially when it comes to CSS there is a time and a place for them, especially when you need a quick way to target a browser other than Internet Explorer.

CSS Hacks: The Problem

Most standards favoring browsers (Firefox, Opera & Safari) have no method of targeting CSS to the specific browser while Internet Explorer, the buggiest browser, has a completely safe and easy method of serving CSS/HTML to only IE.

The Setup

To show that the hacks are working correctly I created 6 paragraphs with their specific browser/version identifier within them. This will let you know that the hack is working correctly

<p id="opera">Opera 7.2 - 9.5</p> <p id="safari">Safari</p> <p id="firefox">Firefox</p> <p id="firefox12">Firefox 1 - 2 </p> <p id="ie7">IE 7</p> <p id="ie6">IE 6</p>

Next I automatically hid all P tags:

<style type="text/css"> body p { display: none; } </style>

Targeting Internet Explorer With CSS Using Conditional Comments

The easiest way to target IE is with conditional comments. There is a robust syntax that Microsoft has created to allow authors to do this. I'm not going to go into detail about this since it has been re-hashed a million times by other bloggers but here are two alternatives to parser CSS hacks:

<!--[if IE 7]> <style type="text/css"> </style> <![endif]--> <!--[if IE 6]> <style type="text/css"> </style> <![endif]-->

Targeting Internet Explorer With CSS Using Parser Hacks

I wouldn't recommend using these hacks since conditional comments are really, really easy to use but if you want to keep all your CSS in one file here is an alternative. Note that the IE7 hack will only apply to IE7 because IE6 does not understand the > selector. It should also be noted that no other browser will recognize this hack.

/* IE 7 */ html > body #ie7 { *display: block; } /* IE 6 */ body #ie6 { _display: block; }

Targeting Firefox With CSS

The first hack targets only Firefox 1 and 2 by using the body:empty hack. The second hack, which is quite clever target all versions of Firefox by using the proprietary extension -moz. -moz combined with the -document url-prefix() which by the way is used by Firefox Addon creators targets Firefox and Firefox alone. I've found that by using proprietary extensions to CSS, as hacks, usually means the most surefire way to target individual browsers without having to worry about another browser possibly parsing the CSS.

/* Firefox 1 - 2 */ body:empty #firefox12 { display: block; } /* Firefox */ @-moz-document url-prefix() { #firefox { display: block; } }

Targeting Safari With CSS

The Safari CSS hack works similar to the Firefox hack because it uses a Safari proprietary extension to CSS. By using the -webkit prefix we can target Safari and only Safari.

/* Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } }

Targeting Opera With CSS

The Opera CSS hack works because of negation in CSS. Currently I feel this hack is the weakest of all the hacks I've listed simply because it's targeting ALL browsers that support -min-device-pixel-ratio that aren't -webkit. It will only be a matter of time before Firefox supports this and this hack will then most likely apply to Firefox as well.

/* Opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #opera { display: block; } }

Putting It All Together:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS Browser Hacks</title> <style type="text/css"> body p { display: none; } /* Opera */ html:first-child #opera { display: block; } /* IE 7 */ html > body #ie7 { *display: block; } /* IE 6 */ body #ie6 { _display: block; } /* Firefox 1 - 2 */ body:empty #firefox12 { display: block; } /* Firefox */ @-moz-document url-prefix() { #firefox { display: block; } } /* Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { #safari { display: block; } } /* Opera */ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { head~body #opera { display: block; } } </style> </head> <body> <p id="opera">Opera 7.2 - 9.5</p> <p id="safari">Safari</p> <p id="firefox">Firefox</p> <p id="firefox12">Firefox 1 - 2 </p> <p id="ie7">IE 7</p> <p id="ie6">IE 6</p> </body> </html>

Sources

Replies:63
Views:212992

<< Back