La propriété CSS unique qui a changé toute ma perception de CSS était display. Dans mon esprit, c'est la propriété qui vous fait réaliser que CSS est un langage pour styliser non seulement des documents HTML mais des documents XML arbitraires (et, en théorie, toute structure de données hiérarchique). Lorsque vous avez compris cela, il y a tellement plus que vous pouvez faire avec la langue.

Pour être plus précis: il N'y a rien inhérent à propos d'un élément paragraph qui le fait apparaître sur la page en tant que block-il se trouve que la feuille de style par défaut de la plupart des navigateurs (sinon tous) définit la propriété display sur block. Il aurait tout aussi bien pu être {[6] } ou quelque chose de complètement fou comme list-item. Lorsque vous dépassez la croyance qu'il y a quelque chose de intrinsèquement spécial à propos de certaines propriétés CSS lorsqu'elles sont appliquées à certains éléments HTML, vous ouvrez la porte à la compréhension de CSS à un niveau différent. Aussi peu pratique que cela puisse être, je crois que les gens apprendraient CSS plus à fond si les navigateurs ne sont pas fournis avec une feuille de style par défaut (ou, plus précisément, si tous les éléments ont été initialisés avec les mêmes valeurs par défaut).

Cela m'amène à un aspect spécifique du HTML / CSS qui a déjà été abordé dans ce fil: les tables devraient-elles être utilisées pour marquer des formulaires? Je crois que ce n'est pas un problème, et je crois que les concepteurs qui le refusent catégoriquement regardent toujours le balisage HTML trop présentationnellement, même si leurs intentions sont le contraire. Permettez-moi de expliquer:

Tout d'abord, regardons l'élément ul, utilisé pour représenter une liste d'éléments non ordonnés. Traditionnellement, ce type de liste est affiché comme une pile verticale des éléments, avec des puces devant chacun. Ces dernières années, cependant, ul a été utilisé pour marquer des choses comme les menus de navigation, avec les éléments alignés horizontalement et sans balles en vue. C'est parce que la signification de ul est prise sémantiquement, pas de manière présente. En d'autres termes: peu importe comment le la liste des éléments sera éventuellement représentée visuellement; si ce que nous traitons correspond au concept d'une liste non ordonnée, nous pouvons et devons utiliser l'élément ul pour cela. C'est ce que le HTML sémantique est tout au sujet.

Maintenant, regardons l'élément table. Traditionnellement, les tables sont affichées comme une collection de lignes et de colonnes, avec des en-têtes au-dessus et/ou à gauche des données de la table. Reconnaissant le but de la propriété display, Cependant, nous savons que ce n'est pas nécessairement le cas: si nous définissons table et tous ses éléments enfants à display: inline, Cela ressemblera à un désordre simple, et si nous utilisons display: list-item pour nos lignes ou cellules, nous pouvons en fait avoir une table ressemblant plus ou moins à une liste non ordonnée (ou même ordonnée). Encore une fois, nous n'essayons pas de capturer la représentation visuelle traditionnelle d'une table; nous essayons de capturer la structure de données réelle qu'une table représente.

Quelle structure de données correspond le mieux à un élément table? Si vous me demandez, il y a une réponse donnée: le tableau à deux dimensions. Pour illustrer mon point, regardons une façon possible de représenter un tableau à deux dimensions en XML:

<parent-array>
    <child-array-keys>
        <key>Name</key>
        <key>Age</key>
        <key>Country</key>
    </child-array-keys>
    <child-arrays>
        <array>
            <value>Mike</value>
            <value>35</value>
            <value>England</value>
        </array>
        <array>
            <value>Jakob</value>
            <value>22</value>
            <value>Sweden</value>
        </array>
        <array>
            <value>Gerhardt</value>
            <value>29</value>
            <value>Germany</value>
        </array>
    </child-arrays>
</parent-array>

Cette structure de données ne pourrait-elle pas aussi bien être représentée de cette manière familière?:

<table>
    <thead>
        <th>Name</th>
        <th>Age</th>
        <th>Country</th>
    </thead>
    <tbody>
        <tr>
            <td>Mike</td>
            <td>35</td>
            <td>England</td>
        </tr>
        <tr>
            <td>Jakob</td>
            <td>22</td>
            <td>Sweden</td>
        </tr>
        <tr>
            <td>Gerhardt</td>
            <td>29</td>
            <td>Germany</td>
        </tr>
    </tbody>
</table>

Les noms des éléments sont différents, mais la structure des données est la même. Combinez cela avec le fait que la propriété display nous permet de représenter n'importe quelle structure de données hiérarchique de différentes manières, et j'espère que vous serez d'accord avec moi qu'une table n'est pas une table parce qu'elle ressemble d'une certaine manière mais parce qu'elle représente une structure de données particulière.

Selon la complexité de votre formulaire, il peut ou non correspondre aux critères d'un tableau bidimensionnel. Même si ce n'est pas le cas, il convient de noter qu'une table peut tout aussi bien être utilisée pour représenter un seul tableau associatif, avec l'élément th dans chaque tr représentant la clé, et l'élément td représentant la valeur. Dans le cas d'une telle forme, vous pourriez dire qu'une liste de définition (dl) pourrait aussi bien être utilisée, et c'est vrai. Dans ce cas spécifique, cependant, je voudrais regarder les avantages et les inconvénients de la mise en œuvre de chaque solution:

• Tout d'abord, il n'y a aucun moyen de joindre explicitement un élément dt et dd (contrairement à HTML 5 ou XHTML 2; j'oublie lequel). L'utilisation d'une table, Cependant, permet juste cela, avec l'élément tr regroupant explicitement les valeurs d'un "tableau" sous un commun élément.
• Deuxièmement, il n'y a aucun moyen d'utiliser de manière fiable le cross-browser display: table et les propriétés CSS associées sur une liste de définitions, vous obligeant à utiliser des techniques flottantes intrinsèquement plus limitées si vous voulez que votre formulaire soit présenté comme une table traditionnelle. Les Tables, bien sûr, ont cette fonctionnalité intrinsèquement à travers la feuille de style par défaut de chaque navigateur couramment utilisé, et elles peuvent avoir des valeurs display complètement différentes si nécessaire.

Espérons, Je n'ai pas gonflé inutilement votre question avec des réflexions sur l'utilisation des tables HTML combinées avec CSS; j'ai simplement senti qu'il était nécessaire de faire un point sur les concepts derrière CSS.

1. Les réinitialisations CSS sont incroyablement utiles.

2. Après un certain temps, vous apprenez les différents bugs (principalement dans IE) et les évitez.

3. CSSEdit sur le mac a plus à voir avec ma connaissance de CSS que toute autre chose. C'est simple et incroyable. Firebug a une capacité similaire ici, mais pas aussi impressionnant.

La Plupart de mes trucs fonctionne dans tous les principaux navigateurs dès le début, même si je développe dans webkit. Cela ne vient que de faire beaucoup et des tas et des tas de feuilles de style CSS.

CSS doit être ma partie préférée du développement. Je ne considérerais pas cela comme un "sac de tours". C'est un langage bien pensé avec la possibilité de faire à peu près n'importe quelle mise en page.

La seule fois où cela affecte mon HTML est quand j'ai besoin de faire des effets javascript (comme des tiroirs coulissants, etc.)- et généralement cela signifie simplement mettre un wrapper autour des choses.

CSS zen est moins CSS

• LESS est une extension CSS qui permet la réutilisation et l'encapsulation des valeurs (valeurs de couleur, par exemple), améliore l'héritage, permet également une meilleure imbrication des propriétés et des opérations connexes.

Il existe une . Net Edition pour LESS CSS.

Commencez à réutiliser des classes, et empilez des classes sur des éléments, ainsi que familiarisez-vous avec les règles de spécificité afin que vous puissiez remplacer certains styles au besoin, vous verrez très rapidement où c'est réellement utile et plus que de simples "astuces".

1. C'est parce Que beaucoup de "techniques" sont des astuces ou des hacks et

2. Quoi que vous vouliez dire par CSS zen, vous l'atteignez en travaillant votre cul. 10000 heures de travail, pour être précis, si on en croit Gladwell.

Traîner dans le Jardin Zen css?
www.csszengarden.com

Comprendre le modèle de mise en page de base de CSS.

, L'unité de base est la boîte. HTML-éléments de niveau bloc comme BODY, P, h N etc. correspond à une boîte dans la mise en page.

Une boîte est rectangulaire et s'étend par défaut horizontalement à la largeur disponible. Verticalement ils sont empilés. Boxed peut être imbriqué, par exemple une P-box sera au moins imbriquée dans une BODY-box.

Les boîtes peuvent avoir une marge, une bordure et un rembourrage, selon le modèle de boîte : http://www.timofejew.ca/2006/css-box-model-hierarchy/

Donc, vous avez une pile verticale (ou une colonne) de boîtes imbriquées. Si vous voulez que certaines boîtes se déplacent en dehors de la colonne principale, par exemple en tant que barre latérale, vous float (float: left|right) Il et il est déplacé vers le bord gauche ou droit du bloc contenant, et la pile principale s'enroule autour.

Si vous voulez que les boîtes soient disposées horizontalement (plutôt que verticalement), vous utilisez display:inline-block.

Si vous avez besoin d'une grille où les bords de les boîtes sont alignées en deux dimensions, vous utilisez display:table. Mais puisque IE avant la version 8 ne supporte pas cela, vous pouvez choisir de "tricher" et utiliser des tables de balisage HTML pour créer la grille.

Si vous voulez placer une boîte complètement indépendante du flux de boîtes, vous utilisez un positionnement absolu, qui placera la boîte exactement où vous voulez-éventuellement chevaucher d'autres contenus.

La route vers l'illumination vient quand vous réalisez que CSS est génial pour les éléments de style Mais awful pour définir la mise en page.{[6] } donc, sauf que pour les mises en page complexes et multi-navigateurs, vous n'allez jamais trouver une solution aussi soignée et agréable que vous l'espérez. Oh, et à l'exception de la révélation que IE6 a été mis sur cette terre comme un moyen de tester votre patience à claquer point serait également utile!

Rappelez-vous que Tout ce que vous faites peut être remplacé, et que votre site doit êtreadaptable pour changer.

RegardezBien nu.

Le contenu est roi. Les sites web ne sont pas différents des livres en ce sens qu'ils formatent le texte d'une manière qui est agréable, visuellement, au lecteur, mais si vous supprimez l'emballage, le site doit toujours circuler comme un document devrait.

La meilleure façon de savoir que vous avez raison est une fois que vous avez supprimé tous les CSS-de cette façon, vous pouvez obtenez les os nus de votre hiérarchie informationnelle, et si tout semble avoir le même poids, cela a été mal fait.

En utilisant des éléments HTML pour leur signification sémantique, vous faites plus que de réduire la quantité de divs que vous utilisez, vous créez sens pour votre document. Les moteurs de recherche donnent plus de poids aux pages qui ont le terme de recherche dans l'en-tête que dans le contenu du corps. Les lecteurs d'écran mettent l'accent sur les titres, non pas parce qu'ils apparaissent plus grand, mais parce que vous leur avez donné la priorité dans le document.

<div class="heading">What I ate for breakfast</div>
<div class="paragraph">Cereal, orange juice, toast.</div>

Même si ce fonctionne dans une perspective de présentation, il a beaucoup moins de sens que cela:

<h1>What I ate for breakfast</h1>
<p>Cereal, orange juice, toast.</p>

Étant encore plus strict, vous pourriez décomposer ce que j'ai mangé pour le petit déjeuner en une liste non ordonnée, mais cela peut être considéré comme exagéré pour ce court exemple. Le fait est qu'en utilisant HTML comme description de votre contenu, vous bénéficiez à tout le monde-vous-même pour un meilleur classement de recherche et votre lecteurs utilisant des méthodes alternatives pour afficher la page.

Pas tout le monde est le même.

Concevoir pour le web n'est certainement pas concevoir pour l'impression. Vous devez rendre votre site bien paraître pour vos lecteurs, sur n'importe quelle plate - forme qu'ils décident d'utiliser-Mac OS X, Windows, Linux, iPhone, mobile, etc. Avant l'apparition de l'iPhone, les navigateurs mobiles aspiraient . La plupart le font encore, et dans ces cas, une fois que vous aurez écrit votre balisage sémantiquement correct, vous pourrez restyle le site en conséquence - après tout CSS comprend un support pour de nombreux médias différents, y compris, mais sans s'y limiter, l'écran d'ordinateur, projecteur, mobile, impression, lecteur d'écran, etc.

L'ordinateur de tout le monde n'est pas le même non plus - les couleurs peuvent être différentes, les polices installées peuvent être différentes, Hé, elles pourraient utiliser IE6. Ne jamais donner à un utilisateur l'impression que le navigateur qu'il a est inadéquat avec des messages contextuels qui disent "votre navigateur est obsolète". Au lieu de cela adapter . Inclure vaste familles de polices qui couvrent les polices les plus récentes et les plus grandes mélangées avec celles couramment utilisées plus bas dans l'arbre. Améliorez votre site progressivement, de sorte que vous pouvez avoir un excellent design dans IE-et le rendre encore meilleur pour les utilisateurs Safari / Firefox avec des choses comme CSS3 multicolumn, ou plusieurs images d'arrière-plan.

Code raisonnablement.

Troisièmement, je veux juste aborder les meilleures pratiques CSS. C'est une erreur de penser que vous devez tout donner un ID et une classe dans votre HTML. À moins que vous exécutez une page qui a besoin de ces ID pour javascript, vous devriez toujours commencer sans les classes et les ajouter plus tard.

Utilisez des sélecteurs descendants comme p em { }, des sélecteurs enfants p > em { } et des sélecteurs adjacents p + em { } pour cibler des éléments spécifiques. Il est facile de prédire les modèles dans la façon dont vos documents sont stylisés, Et vous ne devriez pas avoir besoin de créer des classes "juste parce que". Une bonne astuce que j'utilise est la règle element + * { } - elle applique des styles à tout ce qui vient après un certain élément et c'est astucieux pour effacer les éléments flottants.

Je préfère consolider de nombreuses règles communes en une grande règle, par exemple si je voulais un tas d'éléments différents rouges, j'utiliserais quelque chose comme ceci:

blockquote, a, h3 { color:red; }

C'est beaucoup mieux que de donner à chacun de ces éléments une classe, et bien sûr, vous pouvez toujours remplacer les styles plus tard. C'est la beauté réelle de css, que toute règle générale peut être annulée avec une règle spécifique plus tard.

Cela s'est avéré un peu plus long que j'avais prévu. Pour résumer-écrivez un grand HTML qui n'a pas besoin de divs (sauf si vous devez pour les solutions de contournement de style), planifiez votre conception pour être cross browser en gardant à l'esprit toutes les différences pour chaque utilisateur, et le code au minimum. Il y a beaucoup plus de sélecteurs là-bas, et je n'en ai abordé que quelques-uns ici-le point est de coder sans classes, sauf si vous devez vraiment le faire.

Je ne suis pas tout à fait sûr que je comprends ce que vous voulez dire, cependant, la plupart de mon codage HTML est à peu près dicté par mon CSS. Ce n'est probablement pas la meilleure façon de le faire, mais j'essaie de n'utiliser aucune table et div autant et aussi souvent que possible. De la mise en page à l'apparence ainsi que partout où je peux appliquer CSS.

Je pense que CSS est un excellent outil et plus que de simples astuces. C'est une toute autre façon de voir les choses.

Plus vous utilisez CSS, mieux vous obtiendrez - c'est tout ce qu'il y a vraiment à faire. Vous pouvez lire sur les techniques CSS tous les jours, mais vous ne vous souviendrez de rien jusqu'à ce que vous l'utilisiez.

La maîtrise de CSS n'implique pas de connaître une astuce spécifique pour une situation spécifique (c'est ce à quoi sert internet), mais plutôt de pouvoir proposer une nouvelle astuce pour une nouvelle situation.

Comme les autres messages l'ont mentionné-la maîtrise CSS vient avec la pratique (quelques projets de petite à moyenne taille devraient suffire pour vous amener à un niveau avancé et mieux comprendre les "frameworks" (Cité parce que je n'ai pas cherché s'il y a des frameworks HTML mais c'est le meilleur mot auquel je peux penser pour décrire la séparation HTML/CSS du contenu et du style) utilisé par les développeurs actuels).

Quelques bonnes ressources pour vous de vérifier sont les W3Schools CSS Tutoriel / Reference et bien sûr une vieille recherche Google pour trouver tous ces hacks de compatibilité cross-browser (ou liés au modèle de boîte).

J'ai lu une excellente présentation appelée "CSS orienté objet ", et je souhaite l'avoir lue avant de commencer mon plus récent projet à long terme.

2 Principes Principaux:

1. séparer la Structure et la peau
2. Conteneur et contenu séparés

La présentation se poursuit en détail 10 meilleures pratiques, et 9 pièges.

Combinez ce qu'il vous apprend avec une utilisation suffisante du plug-in Google PageSpeed pour Firefox . Il vous dira quels sélecteurs CSS pourraient être plus efficaces, et comment les rendre plus efficaces.

Je trouve CSS incroyablement utile pour réutiliser et organiser ma mise en page et mon code. Je ne peux pas imaginer développer un site sans utiliser une quantité décente de CSS, et comme c'est un langage relativement simple, il est facile d'apporter des modifications rapides à un ensemble d'éléments sans avoir à creuser des milliers de lignes de code. Peut-être que je suis juste naïf, mais j'aime CSS.

J'ai l'impression d'utiliser des 'astuces plutôt que des tequniques' avec Javascript. Bien que ce soit aussi un must pour tout site dynamique, il ça me fait me sentir sale de pirater un ensemble de fonctions qui envoie des requêtes asynchrones (principalement) parce que ça a l'air plus cool :).