Posts Tagged 'Trucs et astuces'

Comment activer l'écriture sur la barre d'état (window.status) dans Firefox

Monday, 6th Avril 2009 Par Nikhil

Un autre vieux supplémentaire de mémoire de l'école ...

Pourquoi avons-nous pour permettre windos.status?
Javascripts pourrait être un cauchemar quand vous avez quelque chose à déboguer. Firefox a quelques addons pratiques, comme Firebug des thats rend notre vie facile et également, le vote pour la technique de débogage la plus populaire en Javascript doit aller à "ALERTE ()". Anywaz! Il ya quelques cas lors de l'ajout ALERTE ne déboguer votre Javascript mal se comporter est juste ne est pas une bonne idée. Par exemple! vous avez produit dragble dont doit être alerté point .... NON NON! Ne pas le faire! ... Vous obtenez juste alertes infinies ou vous ne serez pas en mesure effectivement draper votre dragable. Eh bien! Il ya plus de bonnes situations, où vous pourriez écrire des textes de débogage pour la barre d'état, beaucoup plus usful ... Croyez-moi! Son expérience!

IE par défaut gauche vous écrivez au Barreau navigateur STATUS utilisant la syntaxe "window.status = 'quelque chose à déboguer», mais FireFox ne fait pas. Donc, pour permettre le changement d'état des fenêtres, vous pouvez faire un des éléments suivants.

Ouvrir about: config dans le navigateur (type "about: config" ce dans la barre d'adresse) et la recherche de
dom. disable_window_status_change. Changez-le à false ... cliquez simplement sur ​​l'entrée pour basculer son état.

Ou bien

"Outils → Options → Contenu → Activer JavaScript / Avancé → Changer le statut texte de la barre"

Et notez aussi que ... d'écrire à la barre d'état de votre Javascript, IE est juste correct si vous utilisez un court-à-dire de syntaxe status = 'un texte de débogage », mais dans FireFox, vous devez utiliser la syntaxe complète dire window.status =' quelque chose à déboguer '


get ExpressingIT News by Email Abonnez-vous à ExpressingIT par e-mail ou Suivez-moi sur Twitter


Une UI Design Bonne doit être conforme aux normes. ou devrait-il? Mon top 10 des règles de conception interface

Thursday, 12th Mars 2009 Par Nikhil


Ni Je suis très nouveau pour l'interface utilisateur (UI) de développement et je ne suis un ancien combattant et que je mets toujours, je me situe dans le profil de développeur interface utilisateur plus que cela d'un designer, sans regrets. Tant Pis! Qu'est-ce que je écris au sujet? ... Pendant un certain temps (doit être en année pas moins) maintenant, chaque maintenant et puis quand je ne reçois dans un peu d'UI Design (lorsque le designer professionnel est allé un jour férié), je pense toujours arrêt cant si ma conception devrait être correctement complient ou non (sincèrement, pas que je pourrais achive 100% de conformité aux normes, Si je voulais aussi). Alors je me dis, ce que la merde! ... Le design doit être simple, agréable et semble surtout utilisable, il ne devrait pas faire fuir les visiteurs ... ou rebond (soit technique). A quoi bon un tableless belle mise en page CSS serait pour le visiteur, qui est inconscient de tout le HYPERTEXTES intelligent et Cascading Style Sheet sous la peau de votre page Web ... Zilch!
Il devrait être l'air agréable et facile à utiliser ... puis vient la substance toutes les normes.

Je stumbbled accross cette entrée de blog par Jason Fried de 37 Signals (Pour ceux qui ne connaissent pas 37 signaux sont les onces qui ont créé certaines applications Web impressionnants comme Basecamp, Campfire etc) qui a écrit quelque chose de semblable en 2004 et croyez-moi, près de 5 ans et pas beaucoup changé depuis ... Je ai été heureux de lire son poste, que je suis totalement d'accord avec ce qu'il a à dire et l'aussi le fait, elle ne est pas sûr de ce qui est dit à propos de sa juste son instinct et ainsi est le mien :)

Jason Fried: "Il ya beaucoup trop parler de CSS et XHTML et les normes et l'accessibilité et ne parle pas assez de gens. CSS et normes conforme Code sont que des outils - vous devez savoir ce qu'il faut construire avec ces outils. Super, je suis heureux que votre interface utilisateur ne utilise pas de tables. Et alors? Qui se soucie si il ne laisse toujours pas les gens à atteindre leurs objectifs. les standards du Web sont grands, mais les propres normes de personnes comprennent faire avancer les choses (et ce est encore trop difficile à faire en ligne).

Concepteurs UI font la même vieille fondamentale "oublier l'être humain de l'autre côté" erreurs - sauf que cette fois leur code semble meilleure. Les humains - non validateurs de code - interfaces d'utilisation ".

Article complet Commander Jason Fried

DISCALIMER: Ce ne signifie pas que nous ne devrions pas se soucier de normes du tout. Les normes sont bon d'avoir et de s'y tenir autant que possible. Nous avons seulement à comprendre que bon UI conception ne signifie pas toujours à 100% les normes complience ou vice versa ....

De ma liste de mes enseignements, je suis un peu UI Design et règles d'or pour le développement ... Heres le TOP 10 ... pas que vous avez les suivre aussi ... :)

1. Prenez soin de vos utilisateurs. Les utilisateurs peuvent faire ou défaire votre site. DONOT faire ressembler à un utilisateur idoit totale, tout à fait incapable d'utiliser votre site Web. Ce est mauvais!

2. Gardez Simplicité et facilité d'utilisation vos guidlines primaires. Trop de choses sur l'écran, plus la probabilité qu'un utilisateur se confondre ou distraits de leur tâche d'origine.

3. Soyez dans les limites ... DONOT livrer trop dans ergonomie, l'accessibilité et les normes. Utiliser les normes de manière efficace et les faire comprendre à l'équipe. Cela permettra d'assurer la cohérence droit dans le produit

4. Prototype l'exigence. Depuis, ces jours-ci l'utilisent des interfaces riches, prototypage est toujours mieux que de simplement faire des représentations filaires simples et ce dernier est dépourvu de interactions décent, il ne permettrait pas de fournir au client une image claire du produit final qui est en cours d'élaboration. Toujours, il est plus facile de convertir les prototypes en résultats finaux. Aussi! prototypage avec tous les problèmes de l'interaction pourrait être aplanies tôt dans le cycle de développement.

5. Cohérence dans votre conception et l'interaction est très important. Donot confondre votre utilisateur avec interactions et gadgets imprévisibles.

6. Comprendre votre "Déclaration Conception Mission". Emporter concentrent sur l'action principale de la page beign conçu. Aussi, faire une liste de vos actions seconday sur la page, et les hiérarchiser.

7. Fournir une rétroaction adéquate aux utilisateurs du site. Avec la plupart des sites Web conçus autour d'AJAX, fournir des repères visuels à l'utilisateur des modifications apportées à la page. L'utilisateur a donné à un accusé de l'achèvement de toutes les tâches qu'il effectue. Donot rendre l'utilisateur attente et devinez, par exemple. fournir des indicateurs de progrès pour uplaods de fichiers.

8. Utilisez contrôle appropriée. Pour exemple, utilisation Sélectionnez dans la liste déroulante pour seulement petites listes, donot laisser l'utilisateur choisir une des 200 villes en utilisant les listes de sélection. Comprendre la différence entre un bouton et un lien. Un lien et le bouton ont des buts différents, donot utiliser un pour l'autre. Fournir la commande de droite pour faire interagir avec une page plus facile. Évitez d'utiliser des menus, qui sont plus que deux niveaux de profondeur. Ne pas réinventer la roue. Utilisez les commandes standards, les personnaliser seulement si très nécessaire. Définissez tous les contrôles personnalisés requis pour votre site première main, afin qu'ils puissent être créés et testés de façon indépendante, prêt pour l'utilisation du site de accross.

9. Donot ITERATE trop sur la conception. Rappelez-vous! Le produit entier consiste plus que le design seul. Construire des délais appropriés dans votre calendrier du projet pour les itérations de conception et de s'y tenir. Itération nous aide à trouver ce qui fonctionne et ce qui ne marche pas, à choisir les points chauds. Comme une bonne interface prend du temps, prévoir du temps pour itérations dans le début du cycle de développement, de sorte que les itérations de conception doesnot directement assimilent à retravailler. Trop de reprise pourrait jeopradize délais.

10. Asseyez-vous et penser comme un utilisateur parfois.


get ExpressingIT News by Email Abonnez-vous à ExpressingIT par e-mail ou Suivez-moi sur Twitter


Appel de multiples fonctions de Windows onLoad en Javascript

Saturday, 7th Mars 2009 Par Nikhil

Heres un autre petit morceau de Javascript ruse que je devais creuser autour parce que la situation commaned il. Dans un de mes sites web, je ai eu cette situation où je ai eu à mettre en œuvre "windows.onload" deux fois. La première chose qui est venu à l'esprit inexpérimenté comme le mien (je dois dire honnêtement que, depuis que je ai été en utilisant des cadres et bibliothèques javascript, je ai oubliera de faire des choses simples sur mon propre ... triste mais vrai), est la méthode suivante ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 etc ...

Désolé de le dire, mais, cela ne marchera pas ... ne veux pas discuter de la science de l'exécution de Javascript bavards ... mais selon mon expérience récente, seule la dernière fonction (onloadfn3) sera malade effectivement exécutée.

Dans les situations normales, contrairement à moi (que je vais vous parler un peu plus tard) ... vous pourriez faire une des actions suivantes pour exécuter des fonctions mutliple onload ....

Ou quelque chose comme ceci

 doOnLoad fonction () {
         (onloadfn1);
         (onloadfn2);
         (onloadfn3);
 }
 window.onload = doOnLoad;

Pour ma situation actuelle, je ne peux pas utiliser de ce qui précède ...
Pourquoi ai-je besoin de faire appel à deux reprises windows.onload, plutôt que l'appel de deux fonctions dans une fonction onload unique? Voici coup d'oeil sur mon relevé de problème ...

«Mes pages du site sont structurés comme le thème WordPress .... ce est à dire il ya un header.php et footer.php commun qui sera inclus dans toutes les pages du site. Il ya une fonction implementaion onload dans le footer.php faire certaines fonctions onload communes. Et il ya quelques pages qui ont besoin de quelque chose de leur propre onLoad, en dehors de celles effectuées par la fonction onload commun. Si je assigne fonction de rappel directement au gestionnaire de window.onload, il écrasera les rappels précédemment attribués dans le footer.php "

.... Mon problème est comprise :) ?

Eh bien! il ya quelques solutions que je ai trouvé. Ils sont tous très semblables et principalement implémentations d'une solution donnée par Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solution:

Il suffit d'ajouter ce code javascript pour le site ...

 addLoadEvent fonction (FUNC) {
     var = oldonload window.onload;
     if (typeof window.onload! = 'fonction') {
        window.onload = func
     } Else {
        window.onload = function () {
            if (oldonload) {
                   (oldonload)
           }
           func ()
        }
    }
 } 

Et appeler à la place du "windows.onload" habituel

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Plus de code à exécuter sur la page de chargement *
 }); 

Avantages de ce bout de code ...
1. Principalement, il vous permet d'avoir plusieurs événements de windows.onload, appelés à partir de pièces séparées de votre code, sans overridding la définition précédente
2. Ce est vraiment discret. Il peut être placé dans un fichier avec vos autres scripts ou dans un fichier séparé.
3. Il fonctionne même si window.onload a déjà été défini.


get ExpressingIT News by Email Abonnez-vous à ExpressingIT par e-mail ou Suivez-moi sur Twitter


Comment inclure du code PHP dans un template Smarty

Tuesday, 24th Février 2009 Par Nikhil

Je ai pensé que celui-ci sera un doodle pour trouver dans google, autant vous nous l'interface utilisateur et scénaristes auraient besoin pour ce faire sur un jour après jour, ce est comprendre un peu de morceau de code PHP extrait (.php) dans un Smarty Template (.tpl). Je ai réalisé que plus facile / populaire de votre requête, encore plus difficile de trouver la réponse exacte ... un million de résultats de recherche, mais la plupart d'entre eux reffered à "fichier" inclut dans Smarty ... qui a la syntaxe suivante

{Include file = "include / header.php"}

Ce fait inlcuded le fichier bien, mais sous forme de texte, ce que je voulais, ce était le résultat de fichier inclus. (Notez ci-dessus est utilisé comprennent modèle dans un fichier de modèle). Enfin avec un persiverance de peu .... Je suis tombé sur une syntaxe slighty modifiée, qui était la réponse à ma condition ... si elle est ici ... si vous havn't trouvé une déjà


{Fichier include_php = "include / header.php"}


get ExpressingIT News by Email Abonnez-vous à ExpressingIT par e-mail ou Suivez-moi sur Twitter


Ajout DropShadow des images en utilisant CSS

Wednesday, 18th Février 2009 Par Nikhil

Un autre tut rapide. Voici quelque chose de simple et agréable en utilisant la puissance de CSS ... mais était concieve difficile (et ce ne était sûrement pas moi) pour commencer. Ajout Dropshadow, pourrait être un morceau de gâteau pour beaucoup d'entre nous, en utilisant des outils de retouche d'image comme Photoshop ANF Fireworks etc.
La raison pour laquelle, je ai opté pour l'ombre portée en utilisant le CSS, ce est que, en général, tout en créant une conception de page / html d'une application, les exigences garder itération. Ce que je veux dire ce est, dans un site Web existant avec de nombreuses images, comme celles affichant la liste des freinds ou une galerie d'images, il sera difficile de retraiter l'ensemble de la charge d'images qui avaient déjà été déchargés pour ajouter ou supprimer les ombres, pour cette question.
Donc, si vous avez fait un peu avant-gardiste tout en créant l'HTMLS d'ajouter ces divisions supplémentaires ou généralement la situation, ce est que vous avez une boucle Logic générer ces icônes / miniatures dans XSL, PHP. JAVA ou tout autre langage de programmation / script, vous pouvez ajouter à tout moment, puis est juste la question du spectacle et cacher ces ombres en utilisant la propriété CSS d'affichage, selon les clients toujours l'évolution des besoins ... Je havn't fait ce genre de réflexion prospective avant que cette ... mais ahev commencé maintenant!

Dans l'exemple ci-dessous, l'image originale est sans ombre et les dropshadows sont appliquées selon les besoins! Aussi, je suis allé un peu plus, en utilisant les astuces de mon précédent Tut (Eh bien! Ce sont probablement plus courte variété de tutoriels, de sorte qu'il ne est justifié que les qualifiant de «Tut" 's) à propos de l'aide de CSS clip propriété pour le spectacle off seulement

Image originale

original_image

Résultats CSS dropShadow
css_dropshadow_results
Voir Démo | Télécharger SourceFiles


get ExpressingIT News by Email Abonnez-vous à ExpressingIT par e-mail ou Suivez-moi sur Twitter


Understandng La propriété CSS Clip

Tuesday, 17th Février 2009 Par Nikhil

Pourquoi dois-je veux comprendre ce ??? Humm ... !!!!

La plupart des écrivains CSS seraient d'accord que la propriété CSS Clip est probablement l'une de la plupart des propriétés CSS non utilisés. Ce était tellement vrai pour moi aussi, et était très heureux de le négliger, que je ai commencé la modification du Knob (Pin) composant Slider Mootools DEUX (avec Range Indicator) .

Il y avait une bonne suggestion de l'un des composants les utilisateurs de modifier le composant Slider en utilisant des images backgroud coupées (contre une division de largeur variable) pour indiquer la plage du curseur. Ainsi vint mon temps à entrer dans les eaux de la propriété CSS Clip amusant, mais affrété par l'ONU (pour moi bien sûr).

Eh bien! comment il peut être difficile? Pas beaucoup du tout ... OUI et NON. La syntaxe à utiliser la propriété CSS Clip est assez verticale mais le sens / usuage est un peu croocked. Avec une mémoire comme le mien, à chaque fois que je siégerai pour retravailler sur mon Script curseur ... Je ai tokeep renvoyant à l'utilisation de cette propriété CLIP, pour me rappeler la logique que je ai créé dans mon script .... DONC! pensé à la plume vers le bas, avec un espoir de se en souvenir l'avenir (et aussi pour le bénéfice de ceux qui semblent boggled par la propriété CSS Clip)

Qu'est-ce que CSS clip faire?

Clip fait partie du module d'effets visuels de CSS 2.1. Autrement dit, son travail consiste à placer une fenêtre visible sur le dessus d'un objet qui est coupé, donc détourage des images et la création de vignettes sans avoir à créer des fichiers supplémentaires (je ai déjà mis cette fonction pour une meilleure utilisation dans le composant Slider :) )

En utilisant la propriété CSS Clip, vous pouvez créer une coupure en utilisant la forme rect. Comme beaucoup d'autres propriétés CSS (comme margin, padding, etc.), en utilisant rect nécessite quatre coordonnées Haut, Droite, Bas, Gauche (DEFT). La nature croocked de cette propriété reflète quand vous jetez un oeil de plus près comment pince calcule la zone de découpage, l'utilisation de ces quatre coordonnées (envoie cerveau dans un tirage au sort pendant un certain temps). Maintenant, pour vous confondre le fond commence par le haut, et le droit commence à partir de la gauche. :). Vous voyez ce que je ai dit? .... Ainsi ce post ...

Ce peu de confusion peut facilement disparaître, avec cette explication visuelle de la CSS Clip / propriété rect comme ci-dessous !!!!

Exigences CSS clip

La tâche que nous avons commencé est de couper l'image miniature dans un image plus carrée recherche (et aussi une image grand-angle)

original_imageclip_demo
Thumbnal origine / Image Exigences de clip pour Sqaure Thumbmail

Résultats CSS clip

clip_results

Voir Démo | Télécharger SourceFiles


get ExpressingIT News by Email Abonnez-vous à ExpressingIT par e-mail ou Suivez-moi sur Twitter


Comment inclure un blog WordPress sur un autre site

Monday, 2nd Février 2009 Par Nikhil

Cette question m'a traversé l'esprit plusieurs fois avant, quand je travaillais sur des sites plus tôt aussi, qui avait l'habitude de montrer WordPress blogs ou nouveau type de contenu dans une partie du site / portal.Being un novice en PHP et autour de WordPress, je ai gardé procastinating, pensant "ce nest pas mon morceau de gâteau". Enfin! cette exigence est venu jusqu'à mon nez, quand il commence diggin autour d'un peu de solution.
Je ai été surpris de constater que ce était vraiment plus facile que je pensais que ce était, pour afficher une liste de titres ou le dernier message sur toute autre page en dehors de la section de WordPress-alimenté, en utilisant simplement un peu de PHP et l'API WordPress .

Voici ce qu'il faut faire: -
Pour des raisons d'explication, supposons que votre site est http://www.inchembur.com/ et vous avez la section des nouvelles de ce site sur http://news.inchembur.com/ (qui exécute WordPress). Maintenant l'exigence est de montrer le dernier message de http://news.inchembur.com/ sur la page d'accueil du site principal, à savoir http://www.inchembur.com/index.php

Étape 1: Dans votre index.php ajouter le peice de code suivant, inclure le fichier API WordPress. Vous pouvez ajouter ceci à la partie supérieure de la page vous voulez que votre message apparaisse sur.

<? Php
'WP_USE_THEMES' , false ) ; define ('WP_USE_THEMES', false); // Utilisation Disbable de WordPress Theme
require ('/var/news.inchembur.com/wp-blog-header.php'); // Inclure WordPress API
; query_posts ('showposts = 1'); // Obtenir le plus récent
?>

Dans le peice ci-dessus comprennent, nous obtenons seulement le seul poste le plus récent. si vous voulez essayer plus variations ne hésitez pas à creuser dans, query_posts() la documentation .

Étape 2: Maintenant, Dans la partie de la page d'index / Accueil où vous voulez montrer le dernier message de WordPress à partir http://news.inchembur.com , utilisez le code suivant. Inutile de dire, ne hésitez pas à vos ad divisions de style, travées et les classes selon vos besoins de conception.

Etape 3: Il n'y a pas Étape 3 ... ce est tout ... ce est fini!


Bien sûr, vous pouvez essayer quelques variantes selon vos besoins (comme je l'ai mentionné plus tôt, reportez-vous à query_posts() la documentation ). Heres un certain avant-goût ...

Comment montrer un poste / page spécifique par opposition à le dernier message: -
Cela peut facilement en modifiant celles réalisées par les arguments pour query_posts() pour inclure l'ID de page ou limace

) ; query_posts ('page_id = 7');
) ; query_posts ("nom de page = environ ');

ou Vous pouvez contrôler le nombre de messages:
) ; query_posts (showposts = 3);


get ExpressingIT News by Email Abonnez-vous à ExpressingIT par e-mail ou Suivez-moi sur Twitter


Chargement JavaScripts dynamiquement

Thursday, 25th Décembre 2008 Par Nikhil

Parfois, pour garder le pageweight bas ... nous avons divisé nos scripts en fragments ... Ces javascript fragments peuvent être chargés en cas de besoin (sur un événement ou un clic de lien ou un bouton, etc.).

Chargement Javascripts dynamique est simple et assez simple comme ci-dessous ...

= “text/javascript” > <Script type = "text / javascript">
fonction loadNewScript (source) {
var s = document.createElement ('script');
s.setAttribute ('type', 'text / javascript');
s.setAttribute ('src', source);
document.body.appendChild (s);
}
</ Script>

et vous pouvez avoir le lien d'appel suivant ne importe où dans le corps, ou vous pouvez avoir ce script "onLoad" du document lui-même ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <a href = "javascript: loadNewScript ('myDynamicScript.js');"> Load Script dynamique </ a>

ou

<Body onload = "loadNewScript ('myDynamicScript.js');">


get ExpressingIT News by Email Abonnez-vous à ExpressingIT par e-mail ou Suivez-moi sur Twitter


Mis-comporter IE8: ruptures de mise en page CSS (ciblage une version de navigateur en utilisant Meta Tags dans IE8)

Wednesday, 17th Décembre 2008 Par Nikhil

Si vous êtes css personne, vous savez la douleur à obtenir vos mises en page de travail cross-browser. IE8 est encore un autre bâton dans les roues pour nous développeurs. Anywaz! si vous frappez sur cette question, comme je l'ai fait hier, où votre CSS fonctionne parfaitement dans IE7 (et versions antérieures) et Firefox a soudainement commencé crises de colère dans IE8, essayez ceci ... Il semblait très bien pour fixer mes problèmes pour le moment ....

Utilisation Meta déclaration, nous pouvons spécifier le moteur de rendu, nous aimerions IE8 à utiliser. Donc, pour forcer IE8 de rendre aussi IE7 ... Insérez le Meta Tag suivant dans la tête de votre document: -

<Meta http-equiv = "X-UA-Compatible" content = "IE = 7" />

Par défaut IE Meta serait: -

<Meta http-equiv = "X-UA-Compatible" content = "IE 8 =" />
ce qui rendrait IE8 rendre la page en utilisant le nouveau mode standard.

Si nécessaire, cette syntaxe peut être utilisé pour accueillir d'autres navigateurs comme ci-dessous:

<Meta http-equiv = contenu "X-UA-Compatible" = "IE = 8; FF = 3; OtherUA = 4" />


Plus sur DOCTYPES:

Si vous êtes encore peu familiers avec le genre de l'animal appelé "Doctype" ... voici quelques lecture rapide
Quels sont DOCTYPES? Quels sont NAVIGATEUR QUIRKS & mode strict?
Réglage du DOCTYPE dans XSL

Pour une compréhension plus approfondie sur les DOCTYPES, essayez de visiter ces liens ...
A List Apart: Fixer votre site avec le droit DOCTYPE!
A List Apart: Au-delà de DOCTYPE: Web Standards, la compatibilité ascendante, et IE8

Remarque: Bien que beaucoup d'entre nous les gens HTML / CSS ont été négligent l'importance de DOCTYPE decleration dans nos documents, Réglage de la droite DOCTYPE, est généralement la réponse à la plupart des questions de la Croix-navigateur.


get ExpressingIT News by Email Abonnez-vous à ExpressingIT par e-mail ou Suivez-moi sur Twitter


Quels sont réinitialisations CSS?

Tuesday, 11th Mars 2008 Par Nikhil

Une réinitialisation CSS est / sont CSS pour régler un certain nombre de styles des éléments à une référence spécifique qui crée la cohérence entre les différents navigateurs.

Nous avons tous été à travers les cauchemars de l'écriture cross-browser de CSS. Alors, quand nous commençons à écrire notre CSS, Ce est une pratique d'abord la réinitialiser pour supprimer / réinitialiser les incohérences de la Croix-navigateur. CSS réinitialisations, sont quelques simples lignes de CSS que vous commencez votre CSS avec, vous donnant une base propre pour commencer à construire votre sur.

Les réinitialisations CSS que je ai tendance à utiliser normalement ressemble à ceci

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}


Réinitialiser la taille de police du navigateur
A noter également la remise à zéro qui a été appliquée à la police du navigateur taille dans la ligne suivante ...

html {font-size: 76%;}

Le CSS ci-dessus réinitialise la taille de la police de navigateur pour 10 pixels, ce qui permet de travailler avec des tailles de police relatives (qui est tout important d'un prespective de conformité WAI)
Pour exemple, dans la définition suivante, font-size dans une durée est fixée à 10 pixels et que dans le paragarph est réglé sur 14 pixels ...

span {font-size: 1em;}
p {font-size: 1.4em;}


get ExpressingIT News by Email Abonnez-vous à ExpressingIT par e-mail ou Suivez-moi sur Twitter


Abonnez-vous à ExpressingIT RSS
get ExpressingIT News by Email Abonnez-vous à ExpressingIT par courriel
Suivez-moi sur Twitter