• Home
  • CSS Filters
    • HTML-based Filters

<link> with data: Protocol URL

Test of Filter

This text will be green if the rule has been applied.

Code Syntax

<link rel="stylesheet" href="data:text/css,%23testElement { color: %2300cc00; }" />
         

Browser Support / Behaviour

Applied By

• All Mozilla 0.9 - 1.6
• Win Opera 7.2 - 7.x

  All characters that have special meanings within URLs must be url-encoded. In particular, # becomes %23.

• OSX Safari 1.2

Not Applied By

• All Mozilla 0.6
• Win IE 4.0 - 6.x
• OSX IE 5.x
• Mac IE 4.5 - 5.x
• Win Opera 3.5 - 7.1
• OSX/Mac Opera 5.0 - 6.x
• OSX Safari 1.0
• MSN for OSX
• Konqueror 2.2

Destroyed

• Win NS 4.x

  This causes Netscape to crash.

• Mac NS 4.x

  The css content (in this case, "#testElement { color: #00cc00; }") is displayed instead of the HTML page. Clicking the Back button on the browser causes the HTML page to be displayed with the CSS rule applied correctly.

Unknown

• Mac IE 4.0
• Mac NS 4.0 - 4.04
• OSX Safari 1.1
• OSX iCab 2.x
• OSX OmniWeb 4.0 - 4.2
• Konqueror 2.0, 3.x

Special Notes

A related technique is to use a javascript: protocol url (<link rel="stylesheet" type="text/css" href="javascript: 'styles.css';" />) however, no browsers tested applied the .css file specified in this way.