Faites votre travail CSS 3 à travers les navigateurs web

category Internet & médias sociaux / Web design & développement / Conception iPhone & iPad web

Si vous concevez votre site Web pour le bureau ainsi que pour l'iPhone et l'iPad, vous pouvez toujours utiliser le CSS expérimentale 3! Finalement, le CSS 3 dans votre site sera probablement pris en charge. L'exemple de cette section vous montre comment couvrir vos paris pour l'avenir.

Pour l'un des -Webkit des exemples de code (qui couvrent les versions Safari aimés 3 et 4), créer une autre règle CSS identique à -moz- pour couvrir Firefox et une règle de CSS avec juste le nom de la racine pour couvrir les nouveaux navigateurs: Opera 10.5, Internet Explorer 9, Safari 5, Chrome, et les futurs navigateurs.

Voici un exemple d'un ensemble de règles pour arrondir les angles d'une boîte:




-webkit-border-radius: 12px; / * Saf3-4 * / - moz-border-radius: 12px; / * FF1 + * / border-radius: 12px; / * Opera 10.5, IE 9, Saf5, Chrome * /

Les nouvelles balises sémantiques HTML5 dans fonctionnent bien dans Safari sur l'iPhone et l'iPad, mais pas dans la plupart des anciens navigateurs encore communes sur le web. Pour rendre ces nouveaux éléments fonctionnent dans les navigateurs plus anciens, tout ce que vous avez à faire est de définir les règles de style pour afficher à bloc de définir les balises sémantiques que des éléments de niveau bloc. Cette action rend agissent comme

tags dans les navigateurs plus anciens.

Parce que tous les navigateurs interprètent HTML et CSS de la même manière, de nombreux développeurs web commencent conception de pages par la création de styles qui éliminent toutes les frontières, le rembourrage ou les marges incluses dans une balise HTML en définissant un style qui définit ces valeurs à 0 (comme vous le voyez dans l'exemple suivant).

Le processus de réinitialisation des éléments permet de garantir que tous les styles que vous créez afficher plus uniforme dans les différents navigateurs Web, car toutes vos balises commencent par la même ardoise vierge. Il est une bonne pratique pour Safari sur l'iPad et l'iPhone, et pour les autres navigateurs.

Dans cet exemple, la afficher a été mis à bloc et régler simultanément la frontière, rembourrage, et marge à 0, pour assurer un affichage plus uniforme dans les différents navigateurs:

article, côté, footer, header, menu, nav, section, de détails, table, corps, h1, h2, h3, p, ul, li, {border: 0- marge: 0- padding: 0-affichage: d'îlot}
Articles Similaires

A propos Auteur
Comment ajouter plusieurs images de fond et de faire pivoter des objets avec CSS3 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 l'effet border-radius CSS3 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 arrondir les bords et de créer de multiples colonnes avec CSS3 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 travailler avec les sélecteurs CSS3 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…

A propos des balises HTML5 A propos des balises HTML5

Pas tous les navigateurs Web sur l'Internet HTML5 de soutien aujourd'hui. Concentrez-vous sur ce qui est possible dans le navigateur web Safari sur l'iPhone, iPad, et iPod. Si vous créez des pages Web pour le grand public de la World Wide Web, vous…

Créer un cadre adaptable avec HTML5 Créer un cadre adaptable avec HTML5

Avant de créer un cadre pour un site Web qui sera affiché sur l'iPhone et l'iPad, il est utile de penser à l'avance sur la façon dont vous voulez que vos pages à regarder lorsque vous ajoutez les styles. Ceci est où filaires peuvent vraiment…

Conception pour les navigateurs Safari et chrome Conception pour les navigateurs Safari et chrome

Safari et Chrome sont des navigateurs WebKit, basé sur le même WebKit déchirerERing moteur, qui contrôle la façon dont le navigateur interprète HTML, CSS et autre code. Tous les navigateurs WebKit suivent les mêmes règles (au moins la…

Afficher un nouveau code de HTML5 dans de nombreux navigateurs Afficher un nouveau code de HTML5 dans de nombreux navigateurs

Quand vous vous concentrez sur la conception d'un iPhone, iPod touch ou iPad, vous avez l'avantage de savoir que vos visiteurs seront en utilisant le navigateur Web Safari. Il est basé sur le moteur WebKit de présentation, ce qui peut rendre CSS 3…

Comment concevoir pour les différents navigateurs web 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…

Comment le style du texte avec CSS 3 Comment le style du texte avec CSS 3

Lorsque vous créez CSS 3 pour un site iPhone ou iPad, vous pouvez non seulement profiter des avantages de polices personnalisées et des ombres portées, mais gagner aussi le défi de dimensionne le texte sur les écrans de dimensions différentes.…

Assurez CSS 3 travailler dans d'autres navigateurs web Assurez CSS 3 travailler dans d'autres navigateurs web

Si vous souhaitez utiliser HTML5 et CSS 3 dans la conception de votre site Web, vous devez savoir que les deux HTML5 et CSS 3 sont encore en cours de développement. La spécification CSS n'a pas encore été approuvé par le W3C, mais de nombreux…

Déplacer vers HTML5 et CSS 3 pour la conception web Déplacer vers HTML5 et CSS 3 pour la conception web

Lors de la planification d'une nouvelle conception de sites Web, rappelez-vous que de nombreuses versions différentes de HTML sont maintenant en cours d'utilisation sur le web. Toutes les versions les plus récentes travailler dans le (système…

Nouveaux ajouts à HTML5 pour la conception web Nouveaux ajouts à HTML5 pour la conception web

IPhone et iPad d'Apple ont transformé le rêve de tenir “ le web dans la paume de votre main ” en réalité - une réalité qui a des implications profondes pour l'avenir de la conception web.Les navigateurs Safari sur l'iPhone et l'iPad…

Faire des coins arrondis avec CSS 3 Faire des coins arrondis avec CSS 3

Si vous avez créé une boîte avec des coins arrondis en utilisant les versions précédentes de CSS, des images et des tableaux HTML, vous savez ce qu'est une douleur, il était - comment vous aviez à créer quatre images (une pour chaque coin),…

» » » » Faites votre travail CSS 3 à travers les navigateurs web