Kompx.com or Compmiscellanea.com

CSS. Target Firefox only

Windows : Firefox 1.5+ [ 1 ] [ 2 ].

Linux : Firefox 1.5+ [ 3 ].

CSS targeting Firefox web browser only:

This text is red in Firefox

HTML / XHTML. Code:

<p>This text is red in Firefox</p>

CSS. Code:

@-moz-document url-prefix() {p {color: #f00;}}

Unlike the method of styling elements for Opera browser only, it is essentially a hack - since the rule originally is intended for a different purpose. But lack of support in browsers other than Firefox allows to isolate code for use by Firefox web browser only.


[ 1 ]

Other browsers with Gecko web browser engine, like SeaMonkey 1.0+ or older Netscape 9.0, also support the hack.

[ 2 ]

Various versions of Internet Explorer, Google Chrome, Opera, Safari react to the hack as they are meant to - these browsers ignore the whole code of the Firefox specific hack.

[ 3 ]

There is also one more browser where text gets red - ELinks, an advanced text-based web browser with some support for CSS.


Aliosque subditos et thema

 

CSS for a range of elements

 

Styling a range of elements. Here from the 1st to the 3rd one - changing background color. Example:         HTML / XHTML. Code: <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> <div>&nbsp;</div> CSS. Code: div:nth-of-type(-n+3) {background: #f66;} /* Extra CSS, just styling the look: */ div {width: 100%; margin-top: 5px; background: #066;} Note: nth-child may also be used instead.

JavaScript rollover. Image swap

 

Example n.1 ( For modern web browsers: Internet Explorer 4.0+, Firefox 1.0+, Google Chrome, Opera 4.0+, Safari 3.1+, SeaMonkey 1.0+, [ 3 ] ): HTML / XHTML. Code: <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" width="728" height="67" alt="JavaScript rollover. Image swap" /></a> CSS. Code: .image {border: 0px;} JavaScript. Code: imageout=new Image(); imageout.src="out.gif"; imageover=new Image(); imageover.src="over.gif"; function image_out(){ document.images['imageout'].src='out.gif'; }; function image_over(){ document.images['imageout'].src='over.gif'; }; Swap image 1 ( out.gif ): Swap image 2 ( over.gif ): Example n.2 ( For older web browsers: Internet Explorer 4.0+, Netscape 3.04+, Opera 3.21+ ): HTML / XHTML. Code: <a href="javascript-rollover-image-swap.htm" onmouseover="image_over();" onmouseout="image_out();"><img src="out.gif" class="image" id="imageout" name="imageout" width="728" height="67" border="0" alt="JavaScript rollover. Image swap"></a> JavaScript.