Magic Numbers in CSS. Magic numbers in CSS refer to values which "work" under some circumstances but are frail and prone to break when those circumstances change. They are usually always related to fonts in some way or another. They are created by an author who likely only tested in their own browser under ideal conditions. Let's take a look at some examples so we all know what they are and hopefully can avoid them in the future. Look at this simple set of tabs: Each of the tabs is set to width: 100px;. In this example 100px is our "magic number. " A bit awkward and likely undesirable. Our tabs would be less prone to breakage if we use min-width instead: Or perhaps no width at all: If you were dead-set on having all the tabs the same size, you could do overflow: hidden; and text-overflow: ellipsis; perhaps: In that case, you'd probably want a title attribute so there is some way to reveal the entire tab name. In a recent post Line-On-Sides Headers, I used a line-height value that was a magic number.
Top: 37px; Sprites CSS : performance et maintenabilité. L’optimisation des performances des sites implique de diminuer le nombre de requêtes HTTP. Pour ce faire, il est possible de regrouper les images utilisées dans les CSS, cette technique s’appelle les sprites CSS. Présentation de la technique La technique dites des sprites CSS consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d’affichage sur l’une ou l’autre image sera définie en CSS grâce à la propriété background-position. Les avantages des sprites CSS sont multiples : Attention : la technique des sprites CSS n’est utile que pour des images à but décoratif, il ne faut pas remplacer toutes les images ainsi.
Exemple d’intégration d’un menu de navigation Plutôt qu’un long discours, voyons comment construire un menu de navigation utilisant cette technique. Il va de soi qu’il est possible d’utiliser les sprites CSS de plein de manières différentes. Conclusion. Useful CSS Snippets for Your Coding Arsenal. Jan 27 2012 CSS is a beautiful language but it can also be frustrating at times. Certain CSS solutions don’t work on certain browsers (cough Internet Explorer cough) and much of your time can be spent debugging code. Thankfully there are lots of great CSS snippets available online that fix common problems and design issues. In this article we have listed 30 CSS snippets that we think you will find very useful. The Code 1. Chris Poteet’s CSS Browser Reset Resetting your CSS style allows you to stop cross browser differences. 2.
Eric Meyer’s CSS code resets is one of the most popular CSS snippets. 3. A cool technique using the box-shadow property that allows you to create multiple borders around an object. box-shadow: 0 0 0 2px #000, 0 0 0 3px #999, 0 0 0 9px #fa0, 0 0 0 10px #666, 0 0 0 16px #fd0, 0 0 0 18px #000; 4. This CSS code will give you the cool ‘tucked corners’ effect that is used on the Gravatar home page. 5. iPad-Specific CSS 6. 7. 8.
Create a sticky footer for your page. 9. 10. 11. An Event Apart: The (CSS) Future is Now. CSS Values | CSS Reference, Properties and Values, CSS3. Le contexte de formatage block en CSS. Certaines spécifications CSS sont plus obscures que d'autres. Mais il est du devoir d'un intégrateur de les connaître pour être plus efficace dans son métier. Qui n'a jamais pesté contre des éléments flottants qui ne se comportent pas comme espéré ? Qui n'a pas été une fois au-moins dérouté par des marges verticales venues de nulle part ? Ces comportements, comme d'autres, sont décrits et expliqués au sein d'une spécification concernant le “Visual Formatting Model”, qui décrit globalement le concept de flux d’affichage, de boîtes et de modes de rendu visuel.
Voyons comment déchiffrer cette ressource cruciale… Block et Inline sont sur un bateau (qui float) Pour commencer, la spécification chamboule nos croyances établies et nous apprend à distinguer les blocks… des blocks. Si vous pensiez qu’un élément block est simplement un élément qui possède la règle display: block, eh bien en fait, non, c’est un peu plus subtil que ça Mais c’est quoi un “contexte de formatage block” ? 3- Fusion de marges :