Change Text Highlight Color

::selection     { background:#c3effd; color:#000; /* Safari and Opera */ }
::-moz-selection  { background:#c3effd; color:#000; /* Firefox */ }

The default text selection color is usually a boring navy color (at least on Windows PCs). 
Firefox, Opera, and Safari allow you to change the color to whatever you'd like!

 

Advertisements

Document Your CSS … As You Go

Going back and commenting code is one of those quixotic things that most fool themselves into thinking they will do. Get in the habit of making good commenting practices while writing styles.

To add a comment in CSS it’s as simple as putting /* Your Comment Here */

Things to comment

Stylesheet Header
This comment briefly states what the stylesheet is for, who wrote it and when. A table of contents might also be needed for larger stylesheets.

Code sections
Put a comment header above large portions of code for things like global styles, headers, sidebars, main content and footer to help delineate them.

For example,

/****************************************/
/*             Sidebar                  */
/****************************************/

Problem declarations
Put comments next to declarations that have know issues in certain browsers, such as

input[type=textbox] /* IE6 Problem */

Dependent declarations
Put comments next to things that are dependant on other areas. So if there is a fixed height on a declaration that might need to be adjusted if the content changes, put a small comment next to it, stating what conditions must happen before it will need to adjust.

Use CSS Shorthand

Using shorthand CSS declarations will lead to quicker coding and debugging. It might also save some errors from mistyping multiple declarations.

When a rule has multiple similiar declarations for a single selector, such as

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

they can be combined into one line, such as

padding: 10px 20px 30px 40px;

The trick to remember which position controls which direction is TRouBLe: Top, Right, Bottom, Left.

The main declarations that use shorthand for are bordermarginpadding andbackground.

Bonus: Hex Shortcut

Six hexidecimal digits used for CSS colors can be condensed down to three if they are grouped in identical pairs.

For example, #000000 can be written #000, or #990055 can be written #905, but #F091A4cannot be shortened since the pairs aren’t identical.

Use a Reset Stylesheet

This is one frequently mentioned as a CSS best practice. The goal of a reset stylesheet is to reduce inconsistencies among browsers by explicitly setting styles to most of the HTML elements. This ensures that things like font sizes and line heights all render the same on different browsers. Also, the reset clears the default paddings/margins that some browsers have.

Not only does having a reset stylesheet account for browser inconsistencies, it’s good to use them to give each site a known foundation when coding. Keeping the foundation the same for all sites will speed along the development.

Download

5 must-have Firefox add-ons for CSS Development

1) Firebug

Everyone knows and loves Firebug! It is the swiss-army knife of web development, and it would be strange If you haven’t heard of it before.
Firebug is a developing tool that helps us in tons of ways. It’s mainly used for CSS and Javascript debugging.

* The HTML tab helps you inspect elements and check their CSS atributes. You can even edit CSS code in a live enviroment. It also allows you to add/edit/delete HTML elements.
* The console tab is great for debugging Javascript errors.
* The Net tab allows you to see every request made to the server by our browser. It may help you detect a server misconfiguration or the plain stupidity of forgetting the leading slash in an image url.

Install: Firebug

2) YSlow (Firebug Add-on)

Firebug is so cool that you can even add add-ons to it! YSlow is a Firebug add-on developed by Yahoo that meassures the speed of your website. Use YSlow to figure out what you can improve/optimize or what’s going wrong.

Install YSlow

3) Web Developer Toolbar

Web Developer Toolbar is awesome. Is a must-have like Firebug. It has tons of tools inside it, but my favorite’s are:

* Ruler: Get the width and height of any element in the website
* Line guides: Make horizontal or vertical lines to check if your layout is correctly aligned
* Resize: check how the website looks in different screen sizes.
* Local HTML + CSS validation (connects with the W3C validation page)
* Disable CSS or Javascript

Install Web Developer Toolbar

4) Dust me selectors

Have you ever had such an enourmous CSS file with so many changes that you can’t even remember?
It’s probable that some selectors you had are not being used anymore. Dust-me selectors checks if any CSS selectors are not being used in your webpage, so you can later delete them 🙂
Warning:

If you are using a reset code (Eric Meyer’s for example), many selectors will appear unused. Comment these lines on yor CSS file when using the dust-me selectors tool.

Install Dust-me Selectors


5) ColorZilla

ColorZilla is a cool tool to work with colors. You have an eyedropper tool that helps you get any color on any element in the website. Three cools things of ColorZilla:

* RGB or HEX colors
* Pallete to adjust/correct colors
* ZOOM to aim better if the element targeted is too small (like text elements)

Install ColorZilla

IE 8 Hack

.paraTxt { margin/*\**/: 10px\9; }

Jump Menu to open in new window

<script type=”text/javascript”>
function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+”.location='”+selObj.options[selObj.selectedIndex].value+”‘”);
if (restore) selObj.selectedIndex=0;
}
</script>

<form name=”form” id=”form”>
<select name=”jumpMenu” id=”jumpMenu” onchange=”MM_jumpMenu(‘window.open()’,this,0)”>
<option value=”http://www.google.com”>Google</option&gt;
<option value=”http://www.yahoo.com”>Yahoo</option&gt;
<option value=”http://www.facebook.com”>Facebook</option&gt;
</select>
</form>