Le langage CSS/Navigateurs et débogage
Débogage.
Un mauvais CSS peut perturber l'affichage des pages liées.
Les principales erreurs sont :
Un bon moyen de vérifier si c'est le code HTML ou CSS qui est fautif, est de désactiver le CSS. Par exemple dans Firefox, menu "Affichage", choisir "style de page" à "aucun style". Le CSS ne sera alors plus pris en compte.
De plus, tous les navigateurs n'interprètent pas les classes de la même façon selon le code qui les appelle. En effet, le rendu CSS peut être très différent d'un navigateur à l'autre, c'est pourquoi après chaque modification, il faut tester au moins les quatre principaux engins (Gecko, Webkit, Trident, et Presto). Cela évitera un effort important de recherche de bug par la suite. Pour ce faire il existe des outils comme http://browsershots.org.
De plus, on peut utiliser JavaScript pour charger un code CSS plutôt qu'un autre selon le navigateur qu'il a détecté :
 <script type="text/javascript">
 alert(navigator.appCodeName);
 </script>
Checklist.
Use obvious background colors to highlight misplaced or misaligned nested elements when debugging
inner divs
Use inline styles and remove ID and class references to display elements that are invisible due to an unknown CSS error
Use word-wrap:break-word(CSS3 Property) or wbr(and its alternatives) to break lines within long words to prevent overflow of an unbreakable string from causing horizontal scrollbars or inadvertent wrapping of blocks to a new line 
Use divs instead of paragraphs when margins don't take effect
Use divs instead of paragraphs to avoid the inherit vertical margins between paragraphs
Use display:inline on an absolutely positioned elements to avoid hasLayout issues
Use margins to move absolutely positioned elements instead of directional shifts
Use border-collapse: collapse; and border-spacing:0 to remove gaps between table columns
Use border styling on the td element instead of the tr element after doing the above to create grid lines on a table
Use empty-cells: hide to remove borders from empty table cells
Use position:relative on inline text and position:absolute on block-level containers and media
Use inline-block to give hasLayout to a relatively positioned container
Make sure class selectors aren't inadvertently overridden by default values of ID selectors, 
especially background-position changes for sprites, by dividing the properties of ID selectors using longhand notation
Use overflow:visible on parent elements if negative margins don't reveal overflow content
Create more classes with specific names instead of creating more complex parent=>child references
Make sure there's not a more specific CSS rule or one that comes later in the style sheet which is overriding the desired effect
Make sure the there's not a number at the beginning of the ignored class or ID name
If the property value for a group of elements doesn't work, redefine that property value for one of those elements to see if a comma is missing or an unsupported selector nullified the entire rule 
If neighboring elements are mysteriously repositioned when an event or hover triggers the display or a submenu or other hidden content, make sure that content is not relatively positioned in external CSS, inline CSS, or generated JavaScript attributes.
If margins between a series of lists with headers are inconsistent due to special cases such as scrollbars for overflow in long lists or different margins for the first or last list, remove margins from the lists themselves and put them on the headers and use padding at the top and bottom of the container to handle spacing between the first or last list and the borders
If a border does not show up on around an element, make the color black or white to see if the color is too light or dark to distinguish from the background
If a div is being pushed beneath its specified position to a new line, use the mouse to select the content within the div to see if the dimensions of a block element within it are causing overflow outside the container. Make sure to set the width of any forms within the container in addition to validating the HTML to make sure no block tags are missing or inline tags have block tags nested within them.
If a hover or visited state of a hyperlink is not working correctly, do the following checks:
-Make sure the pseudo classes are defined in the correct order
-Make sure the pseudo classes don't share the same definition as a less-specific element, like a:hover{color: #ccc;} and .mylink:hover{color: #ccc;} since the browser will group them together and parse the less-specific rules in the cascade before the more specific rule, such as .mysite{color: #eee;}. If this is the case, add a reference to the parent container to the pseudo class rules, for example .mymenu .mylink:hover{color: #ccc;} to increase the selector weight.
-Make sure the pseduo classes are defined or the element selector instead of the class selector, for example .nav a:hover vs nav a.submenu:hover. This may not work in IE6.
-Make sure the rules are defined in the proper order, which is the following:
1. :link, :visited 
2. :hover, :focus
3. :active
Since a link can simultaneously be in the :visited, :hover, and :active states, and they have the same specificity, the last one listed wins.
Increase or decrease the text inside a container to make sure it wraps text and resizes properly
Increase or decrease the font size of the browser a few times to see how it affects your backgrounds and margins, especially for text used in headings and navigation
Apply classes to different elements to make sure each class is not dependent upon a specific tag 
Include several block elements such as a few paragraphs and a large list inside a div to see if it breaks the flow of the container
Use clear to break an element away from a floated sibling and wrap it to a new line
Separate HTML structure and CSS design by developing the naming conventions and organization of the container styles without thinking about the content
Create a reusable library of headers, footers, submenus, navigation bars, lists, forms, and grid layouts
Use consistent semantic style names for classes and IDs
Design modules to be transparent on the inside
Extend objects by applying multiple classes to an element
Use CSS reset styles, web-safe fonts, and grids on all projects
Avoid location dependent styles that break outside of the cascade 
Avoid using a class name that describes the tag or property it is mapped to, such as .hidediv or .floatleft
Avoid using IDs to style content within the main layout containers
Avoid using images to replace text
Avoid drop shadows and rounded corners over irregular backgrounds
Avoid nesting divs inside of spans or having spans adjacent to divs to prevent triggering side-effects caused by the behavior of anonymous block boxes
Any vertical-align value besides top or bottom will be rendered inconsistenly across browsers for form elements
Only use the !important declaration to create user style sheets or to override an inline style if the HTML markup is not editable. The !important declaration must follow the value of the property that it intends to give weight to. Since inline styles can be added to any HTML tag, using the style attribute selector is the only way to override those styles if a class or ID attribute is not defined for the element, as in the following example:
Use an abs pos span nested inside an href to create dropdowns that show up in different places
Use the nested span trick to highlight the parent container of a nav list by setting it's background color to the desired nav background and making it visible on hover. Make the ul the rel pos parent and give it overflow hidden, and make the empty span bottom:0; z-index:-1; height: 99em; and width equal to the nav
 <ul id="nav"><li><a href="#"><span></span>Test 1</a></li></ul>
Use the nested span trick to create polygonal shaped links by offsetting their background positioning and placing them over the desired content
Use a:focus{width:0,height:0,outline:0} to remove dotted borders
Use resets to debug margin/padding issues
Use margins is remove padding and top/bottom positioning for abs positioned elements if spacing is off
Use :default to select all radio button sets
Make sure parent div used for specificity is available in all templates
Use relative/absolute div with a background color to replace text with ellipsis using the follwing steps:
Create a content div with the original content and a height equal to the font-size * the number of rows you want visible
When a JavaScript event is triggered, reduce the height to the new number of rows you want visible by adding a class with that setting
Make sure class selectors aren't inadvertently overridden by default values of ID selectors, especially background-position changes for sprites, by dividing the properties of ID selectors into pieces
Use change events to delegate input and select elements
Use active link states and relative positioning to respond to link clicks
Use the following alternatives for buffering offscreen content:
-Negative margins instead of display:none
-Relative positioning offsets instead of visibility:hidden for text
-background-position instead of visibility:hidden for images
-display:inline block instead of display:table
-clip:rect instead of max-width/height
Absolutely positioned elements moved outside of their relatively positioned parents in Firefox 2 cause the containers to stretch
Use margins for the outermost elements
Use padding for elements that have a background color or image
The :-moz-first-node pseudo-class matches an element that is the first child node of some other element. It differs from :first-child because it does not match a first child element with (non-whitespace) text before it.
The :-moz-last-node pseudo-class matches an element that is the last child node of some other element. It differs from :last-child because it does not match a last child element with (non-whitespace) text after it.
The ::-moz-list-bullet pseudo-class is used to edit the bullet of a list element.
The :default pseudo-class is used to identify a user interface element that is the default among a group of similar elements
Use -ms-text-align-last for orphan lines at the end of paragraphs
Use outlines to style buttons with white accents
Use q { quotes: '"' '"' } to define quote characters
Use the following to trigger quote character display:
Use fixed positioning with @media print to show header and footer containers on every page
Use absolute:positioning instead of fixed positioning to avoid showing header and footer containers on every page
Bootstrap.
Remplacer :
Préfixes automatiques.
Certains outils permettent d'automatiser l'ajout des préfixes dépendant des navigateurs, comme .