Comment utiliser les deux -moz - et -webkit - propriété css pour soutenir les différents navigateurs?
Pour toutes les propriétés CSS3-je utiliser différents fournisseurs préfixé versions pour soutenir les différents Moteurs de Rendu. Voici un exemple:
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
background:#dee0e1;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f1f2f3), to(#dee0e1));
background:-moz-linear-gradient(#f1f2f3, #dee0e1);
background:-o-linear-gradient(#f1f2f3, #dee0e1);
background:linear-gradient(#f1f2f3, #dee0e1);
Pour un border-radius-je utiliser 3 types de propriétés et pour un dégradé d'arrière-plan, je dois utiliser la propriété background dans 5 différentes façon. Augmenter la taille du CSS.
Est-il possible d'utiliser une seule propriété et Firefox 1-5 comprendre?
- Pour en savoir plus: quirksmode.org/blog/archives/2010/03/css_vendor_pref.html
Vous devez vous connecter pour publier un commentaire.
MOINS
est un langage CSS qui compile à la normale CSS et vous donne la possibilité de faire abstraction de beaucoup de la fastidieuse éléments de l'écriture des feuilles de style, tels que la dactylographie de plusieurs fournisseurs de préfixes de tous les temps.Voici un tutoriel décent de faire du vendeur problème du préfixe moins douloureux:
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-never-type-a-vendor-prefix-again/
.. et voici le MOINS de classes à partir du tutoriel: http://snipplr.com/view/47181/less-classes/
En bref, no.
Firefox jusqu'à la version 4, il faut
-moz-border-radius
: http://caniuse.com/border-radiusFirefox 3.6 a encore quelques parts de marché, de sorte que vous devriez garder le vendeur préfixé version pour l'instant.
Il n'y a rien que vous pouvez faire à ce sujet, à l'heure actuelle.
Finalement, tous les navigateurs soutien
linear-gradient
. Jusqu'à ce qu'il se passe, et les anciennes versions ne sont plus utilisés, vous aurez à mettre en place avec ballonnement CSS.Le gradient de code devient vraiment pire si vous voulez soutenir des navigateurs autant que possible:
http://www.colorzilla.com/gradient-editor/
En fait, le vendeur préfixé CSS ne suffit pas d'incidence sur les projets ici que beaucoup
que le problème a été, pour la plupart éliminés avec un javascript fermeture à tenir en cache résultats de la mouche préfixe de test et de mais quelques lignes de javascript. Cela a été mis en œuvre à long avant qu'ils ont commencé à aller de noix avec des préfixes.
Fondamentalement, l'éprouvé et vrai technique est aujourd'hui utilisée par les bibliothèques comme moderniste et tels repose sur un comportement du navigateur qui est étrangement assez cohérente à travers tous les navigateurs, et avec des variations mineures peuvent être utilisés pour toutes sortes de détection de fonctionnalité.
permet de prendre l'exemple de la propriété css 'transformer'. Si vous testez le résultat de...
... et le navigateur prend en charge ce nom , vous allez obtenir une chaîne de caractères , même si elle est vide pour le bien de ne pas être ensemble. En revanche, si le navigateur ne reconnaît pas ce nom, il sera de retour le javascript indéfini.résultat au lieu.
Car il y a vraiment un assez nombre fini de fournisseur de préfixes tels que....
...il ne prend pas beaucoup de les tester, et si vous en cache le résultat de l'essai, il peut être incroyablement rapide. avec les bibliothèques ici , nous sommes en mesure d'auteur à l'aide de la plaine de vieux normes basées sur des noms et de ne pas s'en soucier à l'exception de celles impairs où la valeur de la propriété est disposé différemment comme dans certains gradients.
Avec la mise en cache si elle est si rapide qu'il traduit tous les CSS dans les fichiers CSS et les éléments de STYLE, même avant l'événement DOMContentLoaded est atteint, alors il n'est même pas tout l'écran clignote ou autres bizarreries, on pourrait voir dans les scripts qui doivent attendre le chargement des événements
Tandis que le test et la mise en cache se produit au cours de la charge , tous les divers CamelCase trait d'union de Cas sur la mise en forme de ces noms de propriété est prise en charge, de sorte que même plus tard, lors de l'encodage ou lorsque les attributs sont remis par programmation comme pour CSS 3D, ou même parfois plus de CSS est chargé , toutes les le chiffrage qui a déjà été fait.
Il y a aussi quelques autres belles choses qui peut être fait trop , comme en l'augmentant d'un navigateur support de CSS dans une certaine mesure , ainsi qu'à une chose que j'ai été bricoler avec qui fait
permettre à jQuery ui .fichiers css en fait valider complètement et en même temps être en mesure d'abandonner la plupart de leurs images sans perdre un coup de l'apparence.
BTW , en plus de la technique qui est ridiculement facile et extrêmement rapide , le travail lui-même qui se passe à la deuxième étape de document.readyState , longtemps avant que la page soit complètement chargé ou même du document.readyState 4 "complet".
CSS ne peut pas être l'ami de beaucoup de programmeurs , mais nous l'aimons , et ont même obtenu il, de sorte que le CSS est ce que les charges et les configure ces plugins tiers de gens comme jQuery , éliminant ainsi la nécessité pour la plupart d'entre eux peu d'initialisation des morceaux de scripts et dans de nombreux cas, l'élimination de tout cela.
Parfois, le volume de cisaillement de la bêtise, il ya des gens de la pensée, l'idée de pouvoir avoir validé le contenu et source propre a allé le chemin de la pureté de l'air, mais pas vraiment comme il l'écrou beaucoup plus difficile que la prise d'un CSS triangle truc et de le mettre à jour pour avoir des textures de egyption pyramides 🙂