Webkit a ajouté ses propres marges spécifiques qui sont:
-webkit-margin-before:
-webkit-margin-after:
-webkit-margin-start:
-webkit-margin-end:
Je comprends la différence entre (margin-left et -webkit-margin-start) ou (margin-right et -webkit-margin-end) qui est liée aux langues "de gauche à droite" ou "de droite à gauche".
Ma question est quelle est la différence entre (margin-top et -webkit-margin-before) ou (margin-bottom et -webkit-margin-after)?
Remarque: Il est évident que le préfixe -webkit ne fonctionne que sur les navigateurs du moteur webkit tels que chrome et safari. Cette question ne s'y rapporte pas.
La meilleure réponse que j'ai pu trouver jusqu'à présent est -web-margin-before
agit comme margin-top
sur les documents normaux mais il agira comme margin-bottom
dans les langues "de bas en haut" (la même idée s'applique à -webkit-margin-after
).
Vous pouvez trouver un certain nombre de langues "de bas en haut" dans ce lien omniglot.com/writing/direction.htm (merci à @MarkPlewis)
Alors que Chrome et WebKit prend en charge toutes les propriétés et tous les mots-clés de -webkit-, Safari ne prend en charge que start (Mozilla fait un peu mieux car il prend en charge à la fois le début et la fin). Toutes ces propriétés fonctionneraient dans Safari 6 cependant, donc quand cela sera livré, nous devrons remplacer les valeurs supérieure, droite et inférieure par les propriétés préfixées pour rendre notre "direction" de style agnostique.
Fondamentalement, -webkit- peut être utilisé pour cibler différents navigateurs comme Safari, Chrome et Firefox. Un article détaillé peut être trouvé ici .
Cet article décrit la création d'une feuille de styles de base pour les navigateurs WebKit.
Pour éviter de ne pas appliquer les valeurs -webkit- que j'utilise:
*, *:before, *:after {
box-sizing: inherit;
}