60 votes

Fonctionnalités cachées de CSS

J'ai certainement retenu quelques astuces utiles dans les questions de style relatives aux fonctionnalités cachées concernant PHP et XHTML.

Donc, voici un pour couvrir CSS. Bien que facile à prendre en main, il faut un peu de temps pour tout savoir sur leurs comportements par défaut, leurs propriétés, etc.

En voici quelques unes pour commencer le bal

 @charset "UTF-8"; /* set the character set. must be first line as Gumbo points out in comments */

.element {
        /* takes precedence over other stylings */
        display: block !important;

        /* mozilla .... rounded corners with no images */
        -moz-border-radius: 10px; 

        /* webkit equivalent */
        -webkit-border-radius: 10px 
}
 

Celles-ci ne sont pas tellement cachées , mais leur utilisation n'est pas souvent répandue. Quels conseils, astuces, fonctionnalités rares avez-vous découvert avec CSS?

58voto

Gumbo Points 279147

Vous pouvez afficher l'élément title :

 head, title {
    display: block;
}
 

39voto

Binoj Antony Points 7519

Appliquez plusieurs styles / classes à un élément comme celui-ci class="bold red GoldBg"

 <html><head>
<style>
.bold {font-weight:bold}
.red {color:red}
.GoldBg {background-color:gold}
</style>
</head><body>
<p class="bold red GoldBg">Foo.Bar(red)</p>
</body></html>
 

38voto

Steve Fenton Points 55265

J'aime vraiment les sprites CSS.

Plutôt que d'avoir 20 images à tous pour votre site des boutons et des logos (et donc 20 requêtes http avec le temps de latence autour de chacun), il suffit d'utiliser une image, et la position à chaque fois de sorte que seules les bits que vous souhaitez n'est visible.

Il est difficile d'afficher un exemple que vous auriez besoin de voir la composante de l'image et de la mise en CSS mais j'ai blogué Google utilisation de celui-ci ici: http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/

25voto

Ben Alpert Points 30381

Le fait que float un élément parent entraîne son développement pour contenir tous ses enfants float .

23voto

Gumbo Points 279147

Peut-être des marges négatives et des éléments à positionnement absolu dans des éléments à positionnement relatif .

Voir Comment feriez-vous cela avec CSS? pour des exemples.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X