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 plus, le vote pour la technique de débogage la plus populaire en Javascript doit aller à "ALERT ()". Anywaz! Il ya quelques cas lors de l'ajout ALERT ne déboguer votre Javascript mal se comporter est juste n'est pas une bonne idée. Par exemple! vous avez un objet dragble dont doit être alerté poste .... NON NON! Ne pas le faire! ... Vous venez d'obtenir des alertes infinies ou vous ne serez pas en mesure effectivement Drap votre dragable. Eh bien! Il ya plus de bonnes situations, où vous pourriez écrire des textes de débogage de la barre d'état, beaucoup plus usful ... Croyez-moi! Son expérience!

IE par défaut à gauche vous écrivez au Barreau navigateur STATUS en 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" dans ce la barre d'adresse) et la recherche de
dom. disable_window_status_change. Changez-le faux ... il suffit de cliquer 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 statut = 'du texte de débogage », mais dans FireFox, vous devez utiliser la syntaxe complète c'est à dire window.status =' quelque chose à déboguer »


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


Une interface utilisateur Good Design doit être conforme aux normes. ou devrait-il? Mes TOP 10 des règles de conception UI

Thursday, 12th Mars 2009 Par Nikhil


Ni Je suis très nouveau à 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 l'assurance-chômage développeur plus que celle d'un créateur, sans aucun regret. Tant pis! Que devais-je écrire sur? Pendant un certain temps ... (il doit être dans les années pas moins) maintenant, chaque maintenant et puis quand je n'obtiens dans un peu d'UI Design (lorsque le concepteur professionnel a connu un jour férié), je pensais arrêt toujours cant si ma conception devrait être correctement complient ou pas (sincèrement, que je ne pourrais achive 100% de conformité aux normes, Si je voulais trop). Alors je me dis, ce que la merde! ... Le design doit être simple, agréable et semblent principalement utilisable, il ne devrait pas faire fuir les visiteurs ... ou rebond (pour être technique). A quoi bon un tableless belle mise en page CSS serait pour le visiteur, qui est insensible à tous les HYPERTEXTES intelligent et Cascading Style Sheet sous la peau de votre page Web ... Zilch!
Il convient de l'air agréable et facile à utiliser ... puis vient la substance toutes les normes.

Je stumbbled en face de 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éé des 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 que ... j'ai été heureux de lire son message, comme je suis totalement d'accord avec ce qu'il a à dire et la aussi le fait, elle n'est pas sûr de ce qui est dit à propos de sa juste son instinct et si c'est le mien :)

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

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

Article complet de Jason Fried Commander

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. Il suffit de comprendre que le Bien UI conception ne signifie pas toujours à 100% les normes complience ou vice-versa ....

De ma liste de mes enseignements, je suis un peu d'interfaces 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. C'est mauvais!

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

3 Soyez dans les LIMITES ... DONOT se livrer trop en ergonomie, l'accessibilité et les normes. Utilisez efficacement les normes et les faire comprendre à l'équipe. Cela permettra d'assurer la cohérence sur le produit fini

4. Prototype l'exigence. Depuis, ces jours-ci utilisent des interfaces sont riches, prototypage est toujours mieux que de simplement faire des représentations filaires simples et celui-ci est nulle des 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 produits finaux. Aussi! avec le prototypage des problèmes d'interaction pourrait être aplanies plus tôt dans le cycle de développement.

5. cohérence dans votre conception et l'interaction est très importante. Donot confondre votre utilisateur des interactions et des gadgets imprévisibles.

6 Comprendre votre «Déclaration Conception Mission". Emporter se concentrent sur l'action principale de la page beign conçu. Aussi, faire une liste de vos actions Seconday sur la page, et de 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 changements à la page. L'utilisateur a à donné une reconnaissance de l'achèvement de toutes les tâches qu'il effectue. Donot permettre à l'utilisateur d'attente et deviner, par exemple. fournir des indicateurs de progrès pour uplaods de fichiers.

8 Utilisez les commandes de façon appropriée. Pour exemple, l'utilisation Sélectionnez dans la liste déroulante pour que de 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 le droit de contrôle à faire interagir avec une page 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 absolument nécessaire. Définir des 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ête à l'utilisation du site de en face.

9 Donot ITERATE trop sur la conception. Rappelez-vous! Le produit entier est constitué de plus que la seule conception. 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, choisissez les points chauds. Comme une bonne interface prend du temps, donner du temps aux 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 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 l'un de mes sites web, j'ai eu cette situation où je devais 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 suis en utilisant des cadres et des bibliothèques javascript, j'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 beaucoup ... mais d'après mon expérience récente, seule la dernière fonction (onloadfn3) sera mal fait exécutée.

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

Ou quelque chose comme ça

 fonction doOnLoad () {
         (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 d'appeler 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 de WordPress .... dire qu'il existe 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 d'un peu de leur propre onLoad, à l'exception de celles effectuées par la fonction onload commun. Si je cède fonction de rappel directement au gestionnaire de window.onload, il écrasera les rappels précédemment attribués dans le footer.php "

.... Est compris mon problème :) ?

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

Solution:

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

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

Et l'appeler à la place de la "windows.onload" habituel

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Plus l'exécution de code sur la page de chargement *
 }); 

Les 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 Il 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 pensais que celui-ci sera un doodle à trouver dans google, comme beaucoup, vous nous l'assurance-chômage et scénaristes auraient besoin pour ce faire sur un jour le jour, c'est inclure un peu de morceau de extrait de code PHP (php) dans un templates Smarty (.tpl). J'ai réalisé que plus facile / popularité de votre requête, encore plus difficile de trouver la réponse exacte ... d'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, c'était le résultat de fichier inclus. (Note ci-dessus est utilisé comprennent modèle dans un fichier de modèle). Enfin, avec un peu de persiverance .... Je suis tombé sur une syntaxe slighty modifié, qui était la réponse à ma condition ... si elle est ici ... si vous havn't trouvé un 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 c'est 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, j'ai opté pour l'ombre portée en utilisant le CSS est que, généralement, tout en créant une conception de page / html de la demande, les exigences garder itération. Ce que je veux dire, c'est, dans un site Web existant avec de nombreuses images, comme celles affichant la liste des amis qui venaient ou une galerie d'images, il sera difficile de retraiter la totalité de la charge d'images qui avaient déjà été déchargés pour ajouter ou supprimer les ombres, pour que question.
Donc, si vous avez fait un peu avant-gardiste tout en créant la HTMLS d'ajouter ces divisions supplémentaires ou généralement la situation, c'est que vous avez une logique boucle générer ces icônes / miniatures en XSL, PHP. JAVA ou tout autre langage de programmation / script, vous pouvez ajouter à tout moment, alors c'est juste la question de spectacle et de cacher ces ombres en utilisant la propriété CSS d'affichage, comme par les clients jamais l'évolution des besoins ... je havn't fait ce genre de réflexion prospective avant cela ... mais ahev commencer!

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 n'est justifié de les appeler "Tut" 's) sur l'aide de CSS clip propriété pour frimer seulement

Image originale

original_image

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


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 des la plupart des propriétés CSS non utilisés. C'était tellement vrai pour moi aussi et était très heureux de le négliger, que j'ai commencé à modifier le bouton (Pin) composant Slider MooTools DEUX (avec Range Indicator) .

Il y avait une bonne suggestion de l'un des composants les utilisateurs à 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 la mienne, à chaque fois que je suis assis à retravailler mon script curseur ... J'ai tokeep se référant à l'utilisation de cette propriété CLIP, pour me rappeler la logique que j'ai créé dans mon script .... DONC! pensé à la plume vers le bas, avec un espoir de s'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 créer des vignettes sans avoir à créer des fichiers supplémentaires (j'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 de rect. Comme beaucoup d'autres propriétés CSS (comme margin, padding, etc), à l'aide rect nécessite quatre coordonnées Haut, Droite, Bas, Gauche (DEFT). La nature croocked de cette propriété reflète quand vous prenez un coup d'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 pour 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 j'ai dit? .... D'où ce post ...

Cette petite 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 découper l'image suivante Miniature en une image carrée à la recherche (et aussi une image grand-angle)

original_imageclip_demo
Origine Thumbnal / Image Exigences en matière de clip pour Sqaure Thumbmail

Résultats CSS clip

clip_results

Voir Démo | Télécharger fichiers sources


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


Comment comprendre un blog WordPress sur un autre site

Monday, 2nd Février 2009 Par Nikhil

Cette question m'a traversé l'esprit à quelques reprises avant, quand je travaillais sur des sites plus tôt aussi, qui a utilisé WordPress pour montrer blogs ou nouveau type de contenu dans une partie du site / portal.Being un novice en PHP et autour de WordPress, j'ai gardé procastinating, pensant "Cet hôtel n'est pas mon morceau de gâteau". Enfin! cette exigence est venu jusqu'à mon nez, quand il commence Diggin autour d'un peu de solution.
J'ai été surpris de constater que c'était vraiment plus facile que je pensais qu'il était, pour afficher une liste de titres ou le dernier message sur une autre page en dehors de la section de WordPress puissance, juste avec 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, c'est à dire http://www.inchembur.com/index.php

Etape 1: Dans votre index.php ajouter le peice de code suivant, inclure le fichier API WordPress. Vous pouvez ajouter à 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'); // Obtenez le plus récent
?>

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

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

Etape 3: Il n'y a pas l'étape 3 ... c'est tout ... vous avez terminé!


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

Comment afficher un poste / page spécifique par opposition à la dernière poste: -
Cela peut facilement en modifiant celles réalisées par les arguments de query_posts() pour inclure l'ID de page ou limace

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = 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 au fur et à mesure des besoins (sur un événement ou sur 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 n'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-se 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é à jeter des crises de colère dans IE8, essayez ceci ... Il semblait 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 à rendre comme IE7 ... Insérez la balise Meta suivante 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, la 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 propos 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 DOCTYPES, essayez de visiter ces liens ...
A List Apart: Fixer votre site avec le bon DOCTYPE!
A List Apart: Au-delà de DOCTYPE: les standards du Web, 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 problèmes de navigateur croisées.


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


Quels sont réinitialise CSS?

Tuesday, 11th Mars 2008 Par Nikhil

Une réinitialisation CSS est / sont le CSS à définir un certain nombre de styles d'é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 CSS de. Alors, quand nous commençons à écrire notre CSS, Il s'agit d'une pratique pour le réinitialiser premier à supprimer / réinitialiser les incohérences navigateur croisées. 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.

Le réglage du CSS que j'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 la 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 du navigateur de 10 pixels, ce qui permet de travailler avec des tailles de police relatives (ce qui est tout important d'un prespective de conformité WAI)
Pour exemple, dans la définition ci-après, font-size dans une période est de 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 e-mail
Suivez-moi sur Twitter