Articles taggés avec 'Style Sheet »

Personnalisation d'un formulaire graphique

On m'a demandé comment personnaliser une forme graphique, en particulier une boîte de recherche comme celui sur ce blog. La technique utilisée, ou plutôt que j'utilise, est évidemment valable pour tout type de forme de module. Ce qui change est que la complexité du travail à faire en fonction de la complexité de la forme elle-même.

Suite ...

Très court astuce: CSS conditionnelle et l'optimisation

L'utilisation de conditions dans le navigateur est souvent utilisé pour décider quelle feuille de style à la charge selon le type de navigateur. Par exemple, nous pouvons utiliser ce code pour charger une feuille de style en particulier lorsque le navigateur est Internet Explorer 6:

Suite ...

Très court astuce: la polyvalence des classes CSS

nei fogli di stile CSS. La plupart des experts savent déjà, mais je me suis souvent demandé quelle est la différence entre class et id dans les CSS. , è la possibilità di usare classi multiple. Un aperçu de certaines différences et les avertissements peuvent être trouvés sur la classe et l'ID en CSS , cependant, une fonction utile qui distingue class d' id , c'est la capacité d'utiliser plusieurs classes.

Suite ...

CSS3: quelqu'un at-il vu le navigateur Internet Explorer?

Je ne comprends pas ...

1
2
3
4
5
6
7
8
9
{P
/ * Coins arrondis * /
; /* CSS 3 */ border-radius: 9px; / CSS * 3 * /
; /* Opera */ -O-border-radius: 9px; / * Opera * /
; /* iCab */ -ICab-border-radius: 9px; / * * iCab /
; /* Konqueror */ -Khtml-border-radius: 9px; / * Konqueror * /
; /* Firefox */ -Moz-border-radius: 9px; / * Firefox * /
; /* Safari */ -Webkit-border-radius: 9px; / * Safari * /
}

Suite ...

Safari, supprimer la bordure bleue sur les champs de saisie

Safari, le navigateur d'Apple disponible pour Windows, produit d'une bordure bleue (frontière bleu) lorsque vous cliquez dans un champ input . Si dans certains cas il peut être agréable, les autres devient vraiment ennuyeux! Pour supprimer il suffit de brancher dans notre feuille de style:

1
2
/ * Suppression ____________________________ bleue frontière * /
: 0 none } entrée {outline: none} 0

Ou, alternativement, directement en tant qu'attribut dans la balise input :

1
"outline: 0 none" ... / > < d'entrée de style = "outline: 0 none" ... />

Suite ...

Accessibilité et utilisabilité: Javascript discret

Permettre aux utilisateurs d'interagir avec une page Web ces dernières années a entraîné une augmentation significative de l'utilisation de scripts côté client: le code JavaScript peut réagir en temps réel et de manipuler une grande variété d'informations. Le Web2.0 est l'expression ultime de cette capacité d'interaction, dans laquelle l'utilisateur final - l'utilisateur participe activement à la construction et à «l'évolution du site Web, en interagissant avec lui et vous aider. Est appelée User Generated Content (UGC ou - user-generated content) qui voit le "navigateur" certainement pas passif!

Pour parvenir à cette interaction, permettant ainsi à l'utilisateur final d'ajouter sa contribution, nous avons développé une série de techniques qui ont changé l'apparence et le comportement de pages Web (statiques jusqu'ici, mais maintenant semblables à des applications traditionnelles de Desktop) au cours des dernières années. Changer le contenu d'une page, envoyer des fichiers, donnant leur vote à une vidéo ou un document, enregistrer ou modifier leurs données personnelles, sont quelques-unes des opérations les plus riches dans de nombreux services (2.0 beta) sur le Web

Suite ...

Logiciel Net

C'est arrivé pour allumer le téléviseur Net TV, comme cela s'était passé pour devenir une radio Radio Net, sans parler de la musique! Maintenant, comme mentionné dans d'autres postes, c'est officiel pour le logiciel de transformer à court terme Logiciel Net!

Adobe , dont nous savons a récemment acquis Macromedia, formalise les applications Web - Web 2.0 - en temps réel RIA (Rich Internet Applications) avec l'annonce de vouloir prendre sur le populaire logiciel Photoshop d'édition Web. Il est le dernier « un accord entre Adobe   et Photobucket   de mettre à disposition en ligne d'une technologie pour l'édition vidéo et remix. Merci à la nouvelle technologie développée pour Flash 9 avec ActionScript 3.0 , Adobe vise haut, prévoyant que dans les six mois sera disponible la version en ligne de Photoshop précisément fondée sur la technologie Flash.

En effet, les nouvelles possibilités d' ActionScript 3.0 (impliquant des projets tels que Flex et Apollo - voir aussi Web2.0: Adobe tente d'Apollon et d' application Ajax Rich Internet ) en fait le candidat idéal pour la mise en œuvre de vrai sur la RIA Web Ajax , d'autre part, nous voyons évincé de son trône dans ce nouveau scénario. Malgré les innombrables cadre Ajax, quelques excellents, produites au cours des dernières années, Flash fournit un environnement le plus avancé et facile à manipuler. Aussi nous parler de l'un des plugins les plus populaires au monde: Flash il a derrière un peu plus âgés que l'Ajax et dérivés.

Par ailleurs, il est évident que l'Adobe Flash choisit, il est le producteur maintenant. Cependant, il ya des problèmes techniques qui peuvent être considérées - à ce jour - uniquement être résolue dans une application harmonieuse des technologies telles que Flash. Jeter un oeil à la nouvelle ActionScript 3.0 , nous avons immédiatement réaliser les énormes possibilités de développement offertes par cette nouvelle plateforme. La langue norme ECMA et de nouveaux objets mis à disposition par le cadre vous permettent d'atteindre un niveau de détail possible avec les versions précédentes de Flash: de tous, par exemple, la capacité d'accéder aux données à partir d'un bitmap image téléchargée dur!

L'attaque par Adobe semble avoir lieu sur deux fronts afin distincts qu'ils ont en commun la technologie Flash (qui a toujours été rappelez la capacité à interagir activement avec le navigateur, puis avec le côté client de JavaScript et de scripts côté serveur).

La première attaque a lieu en dehors, du côté du navigateur, où la technologie Apollo est vraiment proposé comme une alternative au noyau habituel des différentes plates-formes, disponible dès aujourd'hui (Windows, Mac OS, Linux, etc ...); utiliser Adobe Apollo , puis, au lieu navigateur pour de meilleures performances et des applications RIA (réel) impensable, contournant ainsi l'incompatibilité entre Internet Explorer, FireFox et la camaraderie. En outre, Apollo offre une plateforme de développement unique, JavaScript comme l'Ajax, mais sans problèmes de compatibilité. Ce dernier point est un revers important aux technologies comme Ajax, qui souffrent encore énormément de questions sur la compatibilité du navigateur, ne pas oublier, par ailleurs, fait toute la question (rendu) graphiques CSS!

L'autre attaque est de l'intérieur, frappant Ajax Framework avec carte Flash. L'élément gagnant dans cette stratégie réside dans l'utilisation de Flash, la technologie Flash, qui est applicable aussi bien dans Flex , aussi bien dans Apollo , à la fois comme une version autonome sont déjà habitués à voir (simple fichier SWF, par exemple)! Il ne fait aucun doute que ce scénario est extrêmement attrayant pour les développeurs et web. Que devient immédiatement réalisables flash réutilisables de diverses manières, sans me forcer à changer une seule ligne de code et, d'ailleurs, sans se soucier de la compatibilité!

Ceci, à mon avis, est une étape importante vers l'avant, un changement des proportions considérables, ce qui implique également le monde des jeux et du marketing. Nous en reparlerons bientôt, ne vous méprenez pas!

Suite ...

Cache-moi

Une caractéristique des feuilles de style (CSS files.) doit être précisé en fonction du support de sortie. Les feuilles de style vous permettent de spécifier la même classe, la même étiquette le même ID, etc ... pour différents médias. Par exemple, je peux écrire un fichier CSS avec la syntaxe suivante.:

1
2
3
4
5
6
7
@ Screen Media {
display : none } div # mybox {display: none}
}

@ Media print {
display : block } div # mybox {display: block}
}

non sarà visibile sul browser, sullo schermo, ma quando provo a stampare la pagina troverò un contenuto diverso da quello che mi aspettavo. Qu'est-ce qu'il arrive à la fin, c'est que le contenu du DIV avec id myBox ne sera pas visible sur l'écran du navigateur, mais quand j'essaye d'imprimer la page se trouve un contenu différent de ce que j'attendais.
Les moteurs de recherche, les araignées, les robots et les agrégateurs, généralement (pour l'instant) ne résolvent pas le fichier css. Ils sont intéressés à l'affichage du contenu n'est pas le formatage. Cependant, cette technique pourrait avoir des implications intéressantes si elle n'est pas inquiétante. En raison des caractéristiques des systèmes d'indexation d'une situation comme celle ci-dessous serait au moins curieux:

1
2
3
4
5
6
7
"visibile_a_video" > < div id = "visibile_a_video">
p > < p > Contenu visible sur l'écran </ p >
</ div >

"visibile_in_stampa" > < div id = "visibile_in_stampa">
p > < p > Contenu visible en imprimer </ p >
</ div >

Corrélée avec un fichier css comme ça.:

1
2
3
4
5
6
7
8
9
@ Screen Media {
display : block } # Visibile_a_video div {display: block}
display : none } div # visibile_in_stampa {display: none}
}

@ Media print {
display : none } div # visibile_a_video {display: none}
display : block } Div # visibile_in_stampa {display: block}
}

Google, par exemple, à la fois indexer le contenu de notre HTML, même si l'écran on peut voir un seul. Si nous imprimer la page vous trouverez un contenu étonnamment nouveau. Le truc, cependant, serait révélé par l'élimination de l'application de styles dans les navigateurs qui le supportent. Normalement on ne réalise une opération de ce type lorsque vous surfez sur Internet. Cette enquête survient seulement après avoir conclu un décalage entre ce qui est visible sur l'écran et ce qui a été imprimé!

À ce jour, j'ai vu aucun cas de ce type de manipulation flagrante en utilisant le CSS. À une époque, elle a essayé d'augmenter la visibilité sur Internet en utilisant une série de textes, de mots, de la même couleur que le fond de la page Web, ce qui rend cet artifice obscure aux yeux des navigateurs. Au moment où les moteurs sont l'indexation se prémunir contre ces «fraude». Peut-être qu'il est temps d'anticiper certains Joker avant de vous créer un précédent?

Actuellement les feuilles de style vous permettent de spécifier une plage de sortie de type de média. Pour une liste complète voir le W3C .

Suite ...

Classe et ID en CSS

nei fogli di stile. Voici quelques conseils brefs sur l'utilisation de class et id dans les feuilles de style. Gardez à l'esprit qu'une fois que l'utilisation des techniques JavaScript avancées, telles que l'utilisation des moteurs Ajax, peuvent entrer en conflit avec les conseils donnés ici! Et à la fin nous verrons pourquoi.

Suite ...

Les merveilles de CSS2.0 +

En raison d'incompatibilités de style et peut-être sortie - encore - cross-browser, pas tout le monde connaît l'immense potentiel des feuilles de style. Nous voulons montrer, par conséquent, certaines fonctionnalités de syntaxe CSS inconnus pour beaucoup et pour nous rappeler combien peu - souvent - nous exploiter pleinement les outils dont nous disposons.

Remarque: Tous les exemples ont été testés sur Firefox 1.5.0.5

Sélection par attributs

1
2
3
4
5
"myInput" > < div id = "myInput">
"submit" value = "invia" / > < d'entrée type = "submit" value = "soumettre" />
"button" value = "Pulisci" / > < d'entrée de type = "button" value = "Effacer" />
"button" value = "Annulla" / > < d'entrée de type = "button" value = "Annuler" />
</ div >
1
2
3
type = submit ] { color : #f00 } div # entrée myInput [type = submit] {color: # f00}
type = button ] { color : #0f0 } div # entrée myInput [type = button] {color: # 0F0}
value = Annulla ] { color : #00f } div # entrée myInput [= valeur Annuler] {color: # 00F}

Cette fonction, souvent appelée cône de pointe CSS2, permet des choses strabiglianti, si nous réfléchissons un instant. Le plus grand avantage que vous ottinene HTML côté, où il n'est pas nécessaire de faire la distinction entre les classes ou tag ID dans les CSS. Ce sont précisément les attributs - si présent - dans la balise pour indiquer quel style associée. Par ailleurs, tous les attributs de la balise peut être pris comme un sélecteur: alt, title, accesskey, etc ...

Sélection de la profondeur

Ce type de sélection est tout simplement spectaculaire, si l'on considère que peuvent être ajoutés à la précédente. Il vous permet de définir la hiérarchie des éléments. En regardant l'exemple ci-dessous nous allons immédiatement conscience de l'importance extraordinaire de ce type de sélection, ce qui maintient le code HTML propre et exempt d'indicateurs inutiles.

1
2
3
4
5
6
7
"myBox" > < div id = "mybox">
p > < p > Paragraphe 1 </ p >
p > < p > Paragraphe 2 </ p >
p > < p > Paragraphe 3 </ p >
p > < p > Section 4 </ p >
p > < p > Paragraphe 5 </ p >
</ div >
1
2
3
p { color : #f00 } div # mybox> p {color: # f00}
p + p { color : #0f0 } div # mybox> p + p {color: # 0F0}
p :last-child { color : #00f } # Mybox div> p: last-child {color: # 00F}

e – fantastico – first-letter ! En effet, juste pour conclure ce survol, ainsi que last-child existe first-child et - incroyable - first-letter ! Essayez-le.
Nous avons à peine effleuré le sujet, bien sûr, assez large pour dire la vérité, qui voit CSS comme instrument de pointe pour la définition des pages layput. Il ya d'autres sélecteurs et les comportements, et bonnes nouvelles pour la spécification du fichier CSS pour les générations futures.

Suite ...