Articles taggés avec 'HTML'


Web2.0: Adobe tente de Apollo?

Apollo est le nom de code (pour l'instant) d'un projet ambitieux dans le monde pour Adobe AIR (Applications Internet Riches) et le Web 2.0, y compris Ajax. Quelqu'un se souvient Macromedia Contribute, Macromedia Central à quelqu'un d'autre. Il ya, aussi, qui voit dans Apollo simple union - ou la possibilité - pour rassembler les éléments de Flash et PDF (quelque chose qui a déjà été possible avec Flash Paper)!

En savoir plus ...

Cachez-moi

Une caractéristique des feuilles de styles (les fichiers. Css) est qu'il peut être spécifié en fonction de la moyenne de sortie. Les feuilles de style vous permettent de spécifier la même classe, de même l'étiquette d'identification même, 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
@ Écran Media {
display : none } mybox # div {display: none}
}

@ Media print {
display : block } mybox # div {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 de la DIV avec id myBox ne sera pas visible sur l'écran du navigateur, mais lorsque je tente d'imprimer la page, trouver un contenu différent de ce à quoi je m'attendais.
Les moteurs de recherche, les araignées, chenilles et les agrégateurs, en général (pour l'instant) ne résolvent pas le fichier css. Ils sont intéressés dans l'affichage du contenu n'est pas le formatage. Cependant, cette technique pourrait avoir des implications intéressantes si ce n'est pas inquiétant. En raison des caractéristiques des systèmes de l'indexation d'une situation comme celle ci-dessous serait pour le moins curieux:

1
2
3
4
5
6
7
"visibile_a_video" > < div id = "visibile_a_video">
p > < p > Contenu visible à la vidéo </ p >
</ div >

"visibile_in_stampa" > < div id = "visibile_in_stampa">
p > < p > Contenu visible dans impression </ p >
</ div >

Corrélée à un fichier CSS comme ceci.:

1
2
3
4
5
6
7
8
9
@ Écran Media {
display : block } visibile_a_video # div {display: block}
display : none } Div # {visibile_in_stampa display: none}
}

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

Google, par exemple, à la fois indicizzerebbe le contenu de notre HTML, même si l'écran serait en mesure de voir un seul. Si nous imprimer la page avec le contenu serait trouver une nouvelle surprise. Le truc, cependant, serait révélé par l'élimination de l'application de styles dans les navigateurs qui le supportent. Normalement on ne procède à une opération comme celle-lorsque vous surfez sur Internet. Une telle enquête ne se poserait que, après avoir constaté un décalage entre ce qui est visible à l'écran et ce qui a été imprimé!

À ce jour, je n'ai vu aucun cas de ce type de manipulation flagrante via CSS. À une époque, il élevait sa visibilité sur Internet en entrant une série de textes, de mots, de la même couleur que le fond de la page Web, de manière à faire les yeux sombres de ces artifices navigateurs. Au moment où les moteurs sont mis en garde contre une telle indexation "fraude". Peut-être il est temps d'anticiper un petit rigolo avant de créer un précédent?

Actuellement, la feuille de style sont utilisés pour spécifier une plage de type de média de sortie. Pour une liste complète, voir le W3C .

En savoir plus ...

Web Developer 1.1.3

Chris Pederick une nouvelle version de Web Developer , pratique add-on pour Firefox et autres navigateurs, qui, avec FireBug rend la vie meilleure pour les développeurs Web.
Stumble ce communiqué pour son bonnes nouvelles par rapport à la version beaucoup plus le faire. Les icônes de la barre ont été redessinés, désormais beaucoup plus efficace. Il a augmenté le nombre de fonctions disponibles dans le menu comme un magnify à portée de main en temps réel, des règles et des lignes directrices, la capacité de modifier le code HTML. Pour être installé dès que possible ...

En savoir plus ...

Dynamique Javascript et CSS du fichier

Dans le Message Créer un lecteur RSS en PHP et Javascript indirectement, nous avons rencontré une technique très intéressante qui a permis de créer - en pratique - un fichier à partir de PHP Javascript.

En savoir plus ...

Dynamic HTML avec Javascript

L'écriture de code dans une page HTML est dynamiquement possible et utile. predisposto ad accettare codice inserito tramite innerHTML . La façon la plus directe consiste à utiliser et connu documenti.write() ou un conteneur DIV prêt à accepter le code inséré par innerHTML . Sinon, vous pouvez attacher à une balise existante et d'utiliser le DOM pour ajouter ou supprimer des éléments dans la page. Par exemple immmaginiamo voulez charger un nouveau fichier sans utiliser de scripts côté serveur Javascript puis recharger la page. Les fonctions ci-dessous, par exemple, ajoute un fichier JavaScript sur votre page comme un paramètre (y compris le chemin).

1
2
3
4
5
6
s ) { fonction addScripting (s) {
document. createElement ( 'script' ) ; scriptNode var = document createElement ('script').;
"head" ) [ 0 ] . appendChild ( scriptNode ) ; document de getElementsByTagName ("tête") [0] appendChild (scriptNode)..;
'javascript' ; . scriptNode language = 'javascript';
s ; scriptNode src = s.;
}

De même, vous pouvez ajouter une feuille de style à notre page, indiqué par la variable cssfile :

1
2
3
4
5
document. createElement ( 'link' ) ; cssNode var = document createElement («lien»).;
'rel' , 'stylesheet' ) ; . cssNode setAttribute ('rel', 'style');
'type' , 'text/css' ) ; . cssNode setAttribute ('type', 'text / css ");
'href' , cssfile ) ; . cssNode setAttribute ('href', cssfile);
'head' ) [ 0 ] . appendChild ( cssNode ) ; document de getElementsByTagName ('tête') [0] appendChild (cssNode)..;

En savoir plus ...

Les classes et les ID en CSS

nei fogli di stile. Voici quelques conseils succincts sur la façon d'utiliser class et id dans les feuilles de style. Gardez à l'esprit qu'une fois que l'utilisation de techniques JavaScript avancées, telles que l'utilisation de moteurs Ajax, peut entrer en conflit avec les recommandations faites ici! Et à la fin nous verrons pourquoi.

En savoir plus ...

Les merveilles de CSS2.0 +

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

Remarque: Tous les échantillons 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" / > < entrée type = "submit" value = "soumettre" />
"button" value = "Pulisci" / > < entrée de type = "button" value = "Effacer" />
"button" value = "Annulla" / > < entrée de type = "button" value = "Annuler" />
</ div >
1
2
3
type = submit ] { color : #f00 } div # myInput input [type = submit] {color: # f00}
type = button ] { color : #0f0 } div # myInput input [type = bouton] {color: # 0F0}
value = Annulla ] { color : #00f } div # entrée myInput [= valeur Annuler] {color: # 00F}

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

Sélection de la profondeur

Ce type de sélection n'est rien de moins que spectaculaire, si vous considérez 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 > Section 3 </ p >
p > < p > Paragraphe 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 évidemment abordé le sujet ont, très complet pour dire la vérité, qui voit CSS comme instrument de pointe pour la définition de pages layput. Il ya d'autres sélecteurs et les comportements, et une excellente nouvelle pour la spécification du fichier CSS pour les générations futures.

En savoir plus ...



Arrêtez SOPA