Latest TweetsWordPress and the Blank Target Vulnerability (aka rel noopener + noreferrer): perishablepress.com/wordpress-… #WordPress #security #html
Perishable Press

Firefox CSS Magic

Consider this post an evolving receptacle for Firefox-specific CSS tricks.

Change color of highlighted text

*::-moz-selection {
	background: #FF3C00; /* the background color of the highlight */
	color: #FFF; /* the color of the text within the highlight */
}

Change opacity

div#division { /* choose either attribute */
	-moz-opacity: 0.99; /* possible values: 0-1 */
	-moz-opacity: 99%; /* possible values: 0%-99% */
}

Control item selection

div#division { /* choose one of the following values */
	-moz-user-select: none; /* no content within the element may be selected */
	-moz-user-select: all; /* contents may be selected only as a whole */
	-moz-user-select: text; /* [default value] only text may be selected */
	-moz-user-select: toggle; /* all contents of the element are selected */
	-moz-user-select: inhereit; /* inherits user-select value from parent element */
	-moz-user-select: element; /* elements may be selected one at a time */
	-moz-user-select: elements; /* multiple elements may be selected at the same time */
}

Rounding corners

div#division { /* choose one of the following values */
	-moz-border-radius: inherit; /* inherits border-radius value from parent element */
	-moz-border-radius: 7px; /* length/unit values indicate corner/border radius */
	-moz-border-radius: 70%; /* percentage values indicate relative corner radius */
}

Note that the -moz-border-radius property may be expressed as to target specific corner(s):

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

Further, the following rule consolidates these four properties into one:

-moz-border-radius: 7px 3px 7px 3px;

Add an outline

div#division, h1 { /* choose one of the following values */
	-moz-outline-width: inherit; /* inherits moz-outline value from parent element */
	-moz-outline-width: medium; /* possible values: thin, medium, thick */
	-moz-outline-width: 7px; /* specifies outline width via an explicit length/unit */
}

Reverse item order

div#division { /* choose one of the following values */
	-moz-box-direction: normal; /* items displayed top to bottom and left to right */
	-moz-box-direction: reverse; /* items displayed bottom to top and right to left */
}

Add a multi-colored, multi-layered border

This nifty CSS property adds a border to an element that is any number of pixels in width. Each pixel-width of the border may display with a unique, user-specified color.

div#divisions { /* spcifies a border along with a uniform color for non-Moz browsers */
	border: 3px solid #333; /* if only two moz-border colors are defined, the third will be this color */
}
div#divisions { /* choose on of the following values */
	-moz-border-colors: inherit; /* inherits border-colors value from parent element */
	-moz-border-colors: none; /* [default value] no color-striping is applied */
	-moz-border-colors: red white blue; /* indicates color values from outside to inside */
	-moz-border-colors: #333 #777 #999; /* indicates color values from outside to inside */
	-moz-border-colors: ThreeDDarkShadow ThreeDShadow transparent; /* named values also apply */
}

Further, -moz-border-color property may be segregated as follows:

div#divisions { /* use any/all of the following attributes */
	-moz-border-top-colors: #333 #777 #999 #FFF;
	-moz-border-right-colors: #333 #777 #999 #FFF;
	-moz-border-bottom-colors: #000 #999 #CCC #DDD;
	-moz-border-left-colors: #000 #999 #CCC #DDD;
}

As always, questions and comments welcome :)

Jeff Starr
About the Author Jeff Starr = Fullstack Developer. Book Author. Teacher. Human Being.
Archives
11 responses
  1. Wow! Nice work. Thanks for taking the time to create and publish this!

  2. Jeff Starr

    My pleasure — thanks for the feedback ;)

  3. These are nice little tricks but as far as I can see, nothing with a ‘-moz-‘ prefix validates as CSS3 :(

  4. Jeff Starr

    Yes, that is true. Initial dashes and underscores have never been — and never will be — associated with CSS. Thus, any proprietary prefix beginning with either of these characters will forever fail to validate.

  5. An initial dashes signals a proprietary extension, and it’s the proper way for a browser to add non-standard functionality, as recommended by the W3C. Even if ‘invalid’, it’s still ‘correct’.

  6. Thanks for answering my comment :)
    I’ve taken to putting the ‘invalid’ css in a separate stylesheet with a comment at the top explaining why it doesn’t validate.

  7. Jeff Starr

    @Mister: Excellent point, Mister — thanks for the reminder!

    @Rob: That sounds like a great idea, especially for those of us concerned with web standards and good design. — Cheers!

  8. I am designing a page where I need to style a firefox checkbox. Is this posible?

    My stylesheet

    input.lastcheck {
         background-color: #3399CC;
         border: 1px solid #000066;
    }

    puts the blue border around it like I want it, in IE. Can somethings similar be done for Firefox?

    Thanks for letting me know.

  9. Jeff Starr

    Hi Mikkel,

    Unfortunately, Firefox doesn’t seem to apply custom border attributes via CSS. On most platforms, you can specify custom height and width via CSS, and even add a background image, however, CSS-styled borders are yet to be supported. For more information, check out Roger’s excellent research on styling checkboxes.

  10. Dennison Uy April 17, 2008 @ 1:48 am

    I wish you’d have provided actual examples as well, good write up though!

  11. Jeff Starr

    Yes indeed, that’s a great idea for a future post — thanks for the idea! :)

[ Comments are closed for this post ]