web-dev-qa-db-fra.com

Pourcentage de mélange et CSS fixe

Il s'agit d'un doublon de UI.StackExchange.com:
https://ux.stackexchange.com/questions/1004/mixing-percent-and-fixed-css

Devriez-vous jamais appliquer le pourcentage et le CSS fixe ensemble? Cela causera-t-il des problèmes, et si oui, quels types?

  • Le mélange dégrade-t-il les performances du navigateur?
  • Le mixage vous donnera-t-il des résultats étranges lors du chargement initial avec des navigateurs à rendu progressif?

Ci-dessous est juste un exemple simplifié d'utilisation mixte, il peut s'agir de n'importe quel mélange. Je ne cherche pas la validation de l'exemple. J'ai entendu dire que vous ne devriez jamais faire ce que j'ai dans l'exemple ci-dessous, donc j'essaie de découvrir si l'utilisation de CSS de cette manière est un problème.

Exemple d'utilisation du mix: 

<style>
.container
{
    width:300px;
}
.cell
{
    width:25%;
}
</style>

<table class="container">
     <tr>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
        <td class="cell"><td>
     </tr>
</table>
cssperformancebrowserrenderingcross-browser
37
rick schott

+1 Bonne question. Vous pouvez consulter cet article: " disposition à largeur fixe, liquide et élastique " Il passe en revue la disposition à largeur fixe (em) et les dispositions élastiques (%), et si vous cliquez sur allez à la page suivante, il examine "hybride élastique-liquide" - où largeur: est définie dans un sens, avec largeur maximale: définissez l'autre. Je sais que l'article lié à ci-dessus n'est pas exactement ce que vous avez demandé, mais c'est un exemple d'utilisation mixte dans un seul style CSS.

Edit: Après quelques lectures supplémentaires, j'ai trouvé pas mal d'opinions contradictoires sur le sujet. J'ai trouvé plusieurs articles qui pensaient que " vous ne pouvez pas mélanger les pixels et les pourcentages ". Bien que, pour la plupart, ces sites soient assez datés. Lorsque j'ai restreint la recherche aux seuls articles publiés au cours de la dernière année, les choses ont un peu changé. Il y avait encore quelques opinions contre le mixage, mais ils n'expliquaient généralement pas pourquoi et semblaient de la variété "J'ai toujours entendu que c'était une mauvaise idée". La majorité des informations plus récentes que j'ai trouvées sur le sujet semblent indiquer que le mélange de pourcentage avec des largeurs fixes est une pratique parfaitement acceptable, tant que cela est fait avec une compréhension des résultats .

voir:

Divulgation complète: je suis un mélangeur depuis de nombreuses années, sans vraiment savoir si mon approche était "correcte".

34
S.Jones

Cela devrait aider à clarifier quand il est correct de mélanger le pourcentage et les pixels et quand ce n'est pas le cas.

Le mélange des pourcentages et des largeurs de pixels ne serait pas un problème lorsque vous le faites comme dans votre exemple;

.container
{
    width:300px;
}
.cell
{
    width:25%;
}

Quand cela devient un problème, c'est quand vous inversez la commande;

.container
{
    width:25%;
}
.cell
{
    width:250px;
}

Dans ce cas, si la fenêtre du navigateur (ou le parent de .container) est inférieure à 1000 pixels, 25% sur .container sera inférieur à 250 pixels et provoquera .cell pour déborder .container.

Cela devient également un problème lorsque vous mélangez des pourcentages et des pixels dans le cas de la largeur plus le rembourrage;

.container
{
    width:300px;
}
.cell
{
    width:100%;
    padding: 10px;
}

Cela entraînera .cell pour avoir une largeur de 320 pixels (100% + 10 pixels + 10 pixels) et un débordement .container.

Faites-moi savoir si cela aide à clarifier les choses.

5
Jo Sprague

La façon dont vous l'avez est très bien. Chaque cellule calcule jusqu'à 75 pixels. Les seules fois où vous devez faire attention aux pourcentages, c'est lors de l'arrondi.

Dans votre exemple, si votre conteneur était de 303 pixels, chaque cellule serait évaluée à 75,66666 pixels et arrondie à 76 pixels, pour un total de 304 pixels qui serait plus grand que le conteneur. Ce pixel cause toutes sortes de problèmes.

4
mikemerce

D'après les recherches que j'ai faites, il apparaît que la façon dont vous ciblez votre CSS (id, classe, universel ... etc) est la plus importante dans les performances de rendu du navigateur.

Rendu efficace CSS

Écriture de CSS efficaces pour une utilisation dans l'interface utilisateur de Mozilla

Optimiser le rendu du navigateur

2
rick schott

Je ne trouve aucune preuve documentée avec des cas de test pour le prouver. Pourriez-vous nous indiquer où vous avez lu à ce sujet?

Je trouve le mélange des deux très utile et je le vois beaucoup à l'état sauvage sur les sites réputés/à fort trafic également.

Le seul problème qui affecte principalement les anciens navigateurs et IE est arrondi. Lisez ici:

http://ejohn.org/blog/sub-pixel-problems-in-css/

http://agilewebmasters.com/robert/percentage-rounding-and-sub-pixel-perfection/

1
Moin Zaman