Caractéristiques cachées de CSS [fermé]

j'ai certainement ramassé quelques conseils utiles dans le traits cachés questions de style concernant PHP et XHTML.

donc en voici un pour couvrir CSS. Bien que facile à récupérer, il faut un peu de temps pour apprendre sur tout, leurs comportements par défaut, propriétés etc

Ici sont quelques-uns pour commencer le ballon

@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 
}

ce ne sont pas tellement caché , mais leur utilisation est pas souvent répandue. Quels conseils, astuces, caractéristiques rares avez-vous découverts avec CSS?

60
demandé sur alex 2009-03-10 02:17:27
la source

27 ответов

vous pouvez afficher l'élément title du document:

head, title {
    display: block;
}
58
répondu Gumbo 2010-01-26 11:05:31
la source

appliquer 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>
39
répondu Binoj Antony 2009-06-05 11:33:36
la source

j'aime vraiment les sprites CSS.

plutôt que d'avoir 20 images pour tous les boutons et logos de votre site (et donc 20 requêtes http avec la latence autour de chacun), vous n'utilisez qu'une image, et positionnez-la à chaque fois afin que seul le morceau que vous voulez soit visible.

il est difficile de poster un exemple que vous auriez besoin de voir l'image du composant et le CSS de placement - mais j'ai blogué L'utilisation de Google de lui ici: http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites /

38
répondu user75525 2009-06-05 11:47:50
la source

le fait que float ing un élément parent va l'amener à se développer pour contenir tous ses float ed enfants.

25
répondu Sophie Alpert 2009-03-10 02:32:29
la source

peut-être marges négatives et éléments de position absolue dans les éléments de position relative .

Voir Comment voulez-VOUS faire avec CSS? pour exemples.

23
répondu Gumbo 2017-05-23 15:09:30
la source

vous pouvez définir une largeur variable pour un élément absolument positionné en spécifiant à la fois les propriétés left et right . Cela vous donne plus de contrôle que simplement paramétrer width à un pourcentage.

par exemple:

#myElement {
    position: absolute;
    left: 5px;
    right: 10px;
}

un autre exemple

#myElement{ /* fill up the whole space :) */
   background: red;
   position:absolute;
   left: 0;
   right:0;
   top: 0;
   bottom: 0;
}
23
répondu Steve Harrison 2011-06-01 12:57:12
la source

regardez les Transformations CSS de Webkit, p.ex. -webkit-transform: rotate(9deg);

sample

21
répondu Nikita Prokopov 2017-02-08 17:16:34
la source

mes uns sont:

  • toutes les propriétés des feuilles sonores comme azimuth , pitch ...
  • certaines propriétés du module d'impression comme page-break-after: avoid;
  • counter-increment: section 1;
  • border-collapse: collapse;
  • background-color: transparent;
  • outline: 1px solid...
15
répondu Marco Luglio 2009-03-10 03:06:59
la source

pas vraiment une fonctionnalité, mais utile néanmoins: le sélecteur d'enfant fonctionne dans tous les navigateurs sauf IE6, vous permettant d'isoler IE6 sans utiliser de hacks ou de feuilles de style conditionnel ou invalider votre code. Ainsi, le lien dans le code suivant sera rouge dans IE6, bleu dans tous les autres navigateurs.

CSS

/*Red for IE6*/
.link {color:#F00;}
/*Blue for everything else*/
#content>.link {color:#00F;}

HTML

<div id="content">
    <a class="link" href="#">Link</a>
</div>

voici un liste des sélecteurs (pour CSS2) et un tableau de compatibilité du navigateur .

15
répondu VirtuosiMedia 2009-03-10 03:21:07
la source

la semaine dernière, je suis tombé sur une propriété CSS étonnamment utile, je n'avais jamais entendu parler de:

text-rendering: optimizeLegibility;

Safari, Chrome et Firefox tous comprendre cette propriété,et lorsqu'ils activent kerning avancé et ligatures. Voici un grand Démo .

15
répondu kingjeffrey 2010-07-18 03:27:15
la source

PNG Transparent in IE6 Cela fixe la transparence PNG dans IE6. Réglez l'arrière-plan sur non et incluez l'image dans filter. Pas besoin de javascript ou htc.

.whatever {
   background: none; /* Hide the current background image so you can replace it with the filter*/
   width: 500px; /* Must specify width */
   height: 176px; /* Must specify height */
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}

Jeux page-rupture de comportement après un élément - Croix-navigateur

table {
   page-break-after:always
} 

Vous pouvez utiliser les propriétés de toujours, d'éviter, de l'automobile, de gauche, de droite, qui sont inhérents. Lire docs à http://www.w3schools.com/CSS/pr_print_pageba.asp

une façon de numéroter les sections et les sous-sections avec "Section 1", "1.1", "1.2", etc-Cross browser

h2:before 
{
   counter-increment:subsection;
   content:counter(section) "." counter(subsection) " ";
}

http://www.w3schools.com/CSS/pr_gen_counter-increment.asp

les bordures D'une table S'effondrent en une seule bordure ou se détachent comme dans le standard HTML - cross browser

table
{
   border-collapse:collapse;
}

http://www.w3schools.com/css/pr_tab_border-collapse.asp

supprimer la bordure de sélection ou la ligne pointillée à partir du bouton ou des champs d'entrée. A d'autres grandes utilisations-Cross browser

button{
   outline:0;
}

http://www.w3schools.com/CSS/pr_outline.asp

* html pour 100% de la hauteur dans IE6

* html .move{
   height:100%;
}

permettre à de longs mots de se casser et de s'enrouler sur la ligne suivante-CSS3 Cross browser

.whatever {
   word-wrap:break-word;
}

http://www.w3schools.com/css3/css3_pr_word-wrap.asp

Abréviations

avant

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif 

après

font: 1em/1.5em bold italic serif;

avant

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

après

background: #fff url(image.gif) no-repeat top left;

avant

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif) 

après

list-style: disc outside url(something.gif);

avant

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px 

après

margin:2px 1px 3px 4px; /*also works for padding*/
margin:0; /*You can also do this for all 0 borders*/
margin:2px 3px 5px; /*  you can do this for top 2px, left/right 3px, bottom 5px and ;    
14
répondu Hussein 2011-04-07 23:33:46
la source

vous pouvez créer des zones de défilement sans recourir aux cadres en utilisant la propriété overflow de CSS. Exemple:

div.foo {
    border:   1px solid;
    width:    300px;
    height:   300px;
    overflow: auto;
}

overflow: auto signifie que si le contenu ne peut pas s'insérer dans le div, des barres de défilement horizontales et/ou verticales apparaîtront au besoin.

overflow: scroll signifie que les deux barres de défilement seront toujours présentes. Si vous souhaitez qu'une seule barre de défilement soit toujours présente, utilisez overflow-x ou overflow-y (qui sont pris en charge par modern navigateurs et IE6).

certains d'entre vous pensent peut-être "duuuh", mais j'ai été surpris d'apprendre que les zones de défilement peuvent être créées sans cadre.

9
répondu Joey Adams 2010-06-26 07:16:07
la source

le : avant et : après pseudo-éléments

la règle suivante fait que la chaîne "Chapter:" est générée avant chaque élément H1:

H1:before { 
  content: "Chapter: ";
  display: inline;
}

pour plus, http://www.w3.org/TR/CSS2/generate.html

8
répondu Hoque 2011-01-30 17:18:09
la source

pas tellement de fonctionnalités cachées, mais une question mettant en vedette CSS tips que chaque développeur débutant devrait connaître sur

7
répondu Paul Dixon 2017-05-23 15:17:11
la source

blocs en ligne (alternative aux divs flottants):

.inline_block
{
    display:-moz-inline-box;
    display:inline-block;
}  

ne pas appliquer cette classe à un div! ça ne marchera pas! l'appliquer à une portée (ou un élément en ligne)

<span class="inline_block">
</span>
7
répondu hasen j 2009-03-10 03:07:35
la source

Inline @media affectations:

/* Styles.css */
.foo { ... bar ... }
...
@media print{
    .ads{display:none}
}

pour que vous puissiez vous débarrasser d'une autre requête HTTP.

7
répondu Halil Özgür 2010-11-01 21:17:13
la source

nous pouvons afficher la balise de style comme un élément de bloc et éditer CSS dynamiquement en utilisant l'attribut HTML5 contenteditable . Démo Ici.

   <body>
       <style contenteditable>
           style {
            display: block;
           }
           body {
            background: #FEA;
           }

       </style>
   </body>

crédits: CSS-Tricks

7
répondu Salman Abbas 2011-03-08 01:11:54
la source

pas vraiment "caché", mais comprendre le modèle de boîte et le modèle de positionnement aidera énormément.

comme, sachant qu'un élément position: absolute est positionné par rapport à son premier parent qui est stylisé avec position: relative .

6
répondu Sophie Alpert 2009-03-10 02:35:43
la source

actuellement uniquement pour WebKit mais très intéressant: CSS Animations

6
répondu alex 2011-01-30 17:19:53
la source

Je n'ai jamais pensé qu'en utilisant la propriété CSS 'border' je peux faire un triangle de forme différente. Voici le lien à suivre,

(edit) Le lien suivant ne fonctionne plus. http://www.dinnermint.org/blog/css/creating-triangles-in-css /

A partir de Maintenant, vous pouvez essayer le suivant, http://jonrohan.me/guide/css/creating-triangles-in-css /

6
répondu Hoque 2011-12-16 07:56:42
la source

word wrapping peut être fait facilement en utilisant css, sans aucune aide de la technologie côté serveur.

word-wrap: break-word;
5
répondu sumanchalki 2010-05-14 11:50:27
la source

un autre sélecteur IE6

* html .something
{
  color:red;
}

Correction de bogues de rendu IE6 aléatoires-appliquer zoom: 1 qui va déclencher layout .

3
répondu Atanas Korchev 2009-03-11 23:52:11
la source

Cross-browser (IE6+, FF, Safari) float alternative:

.inline-block {
    display: inline-block;
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    vertical-align: top;
    zoom: 1;
    *display: inline; }
3
répondu 3zzy 2009-12-29 10:01:50
la source

de la Croix-navigateur inline-block fonctionne sur le bloc et les éléments en ligne en utilisant les déclarations:

.column { 
-moz-inline-box; -moz-box-orient:vertical; display:inline-block; vertical-align:top; 
} 

pour les navigateurs standards, y compris Firefox 2, et:

.ie_lte7 .column { display:inline; } 
3
répondu 2 revs, 2 users 80%Paul Sweatte 2010-06-21 04:50:37
la source

Je n'ai aucune idée si c'est une caractéristique cachée, mais je viens de voir ce: http://www.romancortes.com/blog/css-3d-meninas/

2
répondu zedoo 2010-01-04 23:12:55
la source
.class {
/* red for chrome, ff, safari, opera */
background-color: red;
/* green for IE6 */
.background-color: green;
/* blue for IE7+ */
_background-color: blue;
}

va rendre votre arrière-plan différent dans ces catégories de navigateur

1
répondu TheBrain 2009-07-09 16:43:49
la source

Le border-radius choses fait partie de la spécification CSS3. Comme CSS3 n'est pas encore complètement terminé, les navigateurs les plus progressifs implémentent entre-temps des parties de celui-ci avec leurs propres propriétés (- moz, - webkit). Donc on peut déjà profiter des coins arrondis, bien codés en CSS pur.

malheureusement, L'autre grand acteur sur le marché des navigateurs ne montre toujours aucun signe de mise en œuvre des fonctionnalités css3.

0
répondu Kees de Kooter 2010-06-21 04:51:45
la source

Autres questions sur css hidden-features