2009 28 juillet 2009

CSS2.1 utilisateur par défaut de l'agent de feuille de style

Hier, après la question que j'ai rencontré avec l'Réinitialise CSS dans Google Chrome ... J'ai pensé que de creuser un peu plus profondément dans la zone des feuilles de style de l'agent utilisateur ...
J'ai trouvé ce tableau sur les valeurs par défaut de CSS2.1 Feuilles de style User Agent ... (Pour ceux qui ignorent ce que «Feuilles de style utilisateur Agent" est suivi Qu'est-ce que l'utilisateur Fiches style de l'agent (spécification) .

Pour une liste complète des CSS 2.1 Feuilles de style par défaut des utilisateurs de l'Agent , cliquez ici


2009 27 juillet 2009

Feuilles de style: User Agent marges Mystère dans Google Chrome

Hier, comme tous les autres "Jour de la marmotte", je travaillais sur des mises en page CSS / tableless. Tout allait bien dans IE 7, FF 3 et Chrome, jusqu'à ce coup, j'ai vu des marges non-ignorables vu que dans Google Chrome. Bien que très étrange et Worring, Il était une question nouvelle bogue / que j'avais tombez sur, il y avait enfin un peu de piquant dans mon travail ordinaire. Sad (mais agréable), il s'est fixé en quelques minutes de la sonde ...

Fondamentalement, il ressemblait à Google Chrome ignoré ma Réinitialise CSS (margin: 0px). Il a effectivement été causé par la feuille de style de l'agent utilisateur (-webkit-padding-start: 40px). Donc, la solution était de remettre ce style en définissant padding: 0 les éléments indisciplinés.
Un bon moyen de prévenir ce problème de se produire à n'importe quel élément est d'utiliser un repos mondiale CSS comme suit

* {Margin: 0; padding: 0;}

Qu'est-ce que l'utilisateur Fiches style de l'agent (spécification)?
L'extrait suivant est tiré de http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , lien suivi pour en savoir plus sur les feuilles de style de l'agent utilisateur

CSS 1 introduit l'idée en déclarant que chaque agent utilisateur (UA, souvent un «navigateur Web» ou «client web») aura une feuille de style par défaut qui présente des documents dans un délai raisonnable - mais sans doute banal - de manière. CSS 2 dit que les agents utilisateurs conformes doivent appliquer une feuille de style par défaut (ou se comportent comme si ils l'ont fait) et que la feuille d'un agent utilisateur de style par défaut devrait présenter les éléments de la langue du document de façon à satisfaire les attentes générales de présentation pour la langue du document; CSS 3 est susceptible d'être de l'esprit même.

Étant donné que les spécifications CSS laisser place à des implémentations d'utiliser ou non une feuille de «réel» de style pour l'affichage par défaut ou non, il n'est pas étonnant que vous ne trouvez pas une feuille de style par défaut dans le dossier d'installation à chaque navigateur. Contrairement à Internet Explorer de Microsoft, ainsi que l'Opéra, par exemple (et pour autant que je sache), les navigateurs basés sur Gecko comme Firefox et Netscape Navigator (cherchez "html.css"), mais aussi Konqueror faire assez simple à comprendre leur style par défaut.


2008 11 mars 2008

Quels sont Réinitialise CSS?

Un Reset CSS est / sont les CSS pour définir un certain nombre de styles d'élément à un niveau de référence spécifique qui crée la cohérence entre les différents navigateurs.

Nous avons tous été à travers les cauchemars de l'écriture cross-browser CSS. Ainsi, lorsque nous commencer à écrire notre CSS, Il s'agit d'une pratique pour réinitialiser d'abord de supprimer / réinitialiser toutes les incohérences Croix-navigateur. Réinitialise CSS, sont de simples quelques lignes de CSS que vous commencez votre CSS avec, en vous donnant une base propre pour commencer à construire votre sur.

Le CSS que je réinitialise normalement ont tendance à utiliser ressemble à ceci

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}


Réinitialiser la taille de police navigateur
A noter également la remise à zéro qui a été appliquée à la taille de police du navigateur dans la ligne suivante ...

html {font-size: 76%;}

Le réinitialise ci-dessus la taille de police CSS navigateur à 10 pixels, ce qui rend possible de travailler avec les tailles de police relatives (qui est tout à partir d'une importante respect WAI prespective)
Pour exemple, dans la définition suivante, font-size dans une travée est fixée à 10 pixels et que dans le paragarph est fixé à 14 pixels ...

span {font-size: 1em;}
p {font-size: 1.4em;}


NDK la maison | Exprimant IT | Bouche Exprimant | Penmenship Exprimant | Awe Exprimant | m'exprimer