Comment travailler avec les sélecteurs CSS3
À la mi-2010, les concepteurs et les développeurs Web se réjouissaient que CSS3 a commencé à faire son chemin dans le courant dominant. Depuis ce temps, le soutien de navigateur pour CSS3 a régulièrement augmenté et amélioré, même si CSS3 est pas encore officiellement un standard du W3C.
En fait, le seul inconvénient (si vous voulez même appeler ça comme ça) à l'utilisation de ces sélecteurs aujourd'hui est que vous pouvez encore parfois besoin d'ajouter des préfixes spécifiques au navigateur à votre CSS pour veiller à ce que tous les styles CSS3 apparaissent correctement dans l'ancienne versions des navigateurs les plus populaires.
Pour illustrer, si tous les navigateurs pris en charge le CSS3 colonnes sélecteur, vous avait seulement besoin de spécifier une seule colonnes déclaration dans votre style comme ceci:
div {colonnes: 100px 3-}Cependant, parce que ce sélecteur est pas prise en charge de la même manière par tous les navigateurs populaires, la solution consiste à écrire votre déclaration de CSS3 seul d'abord, puis directement en dessous vous devez inclure les déclarations en double avec des préfixes spécifiques au navigateur. Notez comment commentaires CSS sont ajoutés au CSS pour identifier les navigateurs associés à chaque préfixe:
div {colonnes: 100px 3--Webkitcolonnes: 100px 3- / * Safari et Chrome * /-moz-colonnes: 100px 3- / * Firefox * /}Voici une liste de préfixes CSS3 par navigateur:
| Navigateur | Préfixe |
|---|---|
| Internet Explorer | -Mlle- |
| Firefox | -moz- |
| Google Chrome | -Webkit |
| Safari | -Webkit |
| Opéra | -o- ou -XV- |
Pour obtenir une liste à jour de l'aide du navigateur pour toutes les propriétés CSS3, consultez le tableau à w3schools.com.
Veillez également à télécharger un exemplaire gratuit du magazine Smashing CSS3 Cheat Sheet PDF, ce qui peut vous aider à découvrir comment utiliser CSS3 dans vos créations web: Smashing Magazine.
-
Comment vérifier la compatibilité CSS dans Adobe Dreamweaver CS6 -
10 ressources Web Stellar pour HTML5 et CSS3 -
10 choses que vous devez savoir sur le design web avec HTML5 et CSS3 - Fichiers de code pour HTML5 et CSS3
-
Comment utiliser des transformations CSS3 -
Ressources en ligne pour générer des gradients CSS3
4 endroits pour trouver des générateurs de CSS3 CSS3 generators, qui sont des outils que vous pouvez utiliser pour créer, interagir avec, ou un code de test. Ces outils comprennent un large éventail de types spécifiques, y compris les assistants, les concepteurs, les environnements de…
Soutien CSS3 et navigateur L'état actuel des normes pour le soutien de navigateur Web pour les effets CSS3 et transformations est en pleine mutation. Très probablement, au fil du temps les pouvoirs-que-être dans le monde du navigateur - ceux qui publient Internet Explorer,…
Comment ajouter plusieurs images de fond et de faire pivoter des objets avec CSS3 Avec CSS3, vous pouvez facilement ajouter autant d'images d'arrière-plan à un seul élément comme vous voulez. Vous pouvez également faire pivoter les images. L'illustration montre un exemple d'un conteneur avec trois images de fond, un motif,…
Comment appliquer des effets de CSS3 et transforme dans Dreamweaver Les effets CSS3 et transformations peuvent être définies dans le panneau Styles CSS. Création d'un effet de CSS3 prend quelques frappes de votre part. Pour ajouter un effet de CSS3 ou transformer à une définition de style, suivez ces étapes:…
Comment appliquer l'opacité / transparence dans CSS3 L'opacité ou la transparence est un nouvel effet dans CSS3. Les concepteurs sont vraiment dans les premiers stades de l'expérimentation de cet effet. En CSS3, la transparence est définie par l'attribution d'une valeur à la propriété…
Comment appliquer l'effet border-radius CSS3 L'effet CSS3 border-radius définit des coins arrondis. Et, vous devez utiliser des préfixes spécifiques au navigateur lors de la définition d'un border-radius. Voici quelques règles pour définir un border-radius:Vous ne pouvez pas appliquer un…
Comment concevoir des effets de calques CSS3 utilisant layerstyles Créer le bon aspect pour une couche de CSS3 peut être difficile. Une couche est composée de l'ombre extérieure, frontière, et l'ombre intérieure des éléments (comme un ) Que vous créez. LayerStyles permet de concevoir visuellement les…
Comment optimiser les applications CSS3 avec Modernizr Il existe de nombreux navigateurs différents et versions de navigateurs en usage aujourd'hui. Chacun d'entre eux ne sont pas optimaux pour CSS3. Ceci est où Modernizr entre en jeu. Ses développeurs appellent «une bibliothèque…
Comment arrondir les bords et de créer de multiples colonnes avec CSS3 Au lieu d'avoir à utiliser jusqu'à quatre images distinctes pour donner l'illusion d'une forme incurvée sur votre site web, avec CSS3, vous pouvez maintenant créer des conteneurs avec coins arrondis! Voici le code, qui a la déclaration de CSS3…
Comment utiliser un sélecteur de balise ou élément de CSS3 Tag (ou élément) sélecteurs sont des séquences de caractères dans CSS3 que vous utilisez pour choisir balises telles que et. En fait, vous pouvez sélectionner une balise HTML de cette façon. Un sélecteur de balises repose toujours sur le…
Comment utiliser des valeurs de couleur dans CSS3 CSS3 prend en charge un certain nombre de systèmes de valeur de couleur. La seule exigence est que le navigateur supporte également le système de couleur. Voici les systèmes de couleurs que la plupart des navigateurs prennent en charge:Rouge…
Comment travailler avec datepicker en CSS3 Il ya des situations où HTML5 offre actuellement une solution pour un besoin particulier dans CSS3, mais quelques vendeurs ont encore mis en œuvre. Ceci est le cas avec la date et l'heure le support de HTML. Seulement Opera et Chrome offrent un…
Nouveaux outils de conception et de nouveaux styles avec CSS3 CSS3 rend effets graphiques moins cher et plus facile à créer, rapide à télécharger sur les pages Web, et plus accessible dans toutes sortes d'environnements et de moteurs de recherche.Par exemple, le texte de travers (et enfermant biaisée…
Comment concevoir pour les différents navigateurs web Bien que votre public peut différer, vous pouvez créer des sites Web qui semblent bonnes dans Safari sur l'iPhone et l'iPad sans compromettre la conception de la page lorsque l'affichage dans les navigateurs Web les plus populaires sur…