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 n'est tout simplement pas une bonne idée. Par exemple! vous avez produit dragble dont doit être alerté poste .... NON NON! Dont le faire! ... Vous venez d'obtenir des alertes infinies ou vous ne pourrez pas fait Drap votre dragable. Eh bien! Il ya plus de bonnes situations, où vous pourriez écrire les textes de débogage à 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 de débogage ", mais Firefox ne pas. Donc, pour activer les fenêtres changement de statut, 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. Changer pour faux ... il suffit de cliquer sur l'entrée pour passer son état.

Ou bien

"Outils → Options → Contenu → Activer JavaScript / Avancé → texte de la barre Changement d'état"

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


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? 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 l'assurance-chômage développeur plus que celle d'un créateur, sans aucun regret. Tant pis! Qu'est-ce que je vous écris au sujet? 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 de conception d'interfaces utilisateur (lorsque le concepteur professionnel est allé un jour férié), je ne peux pas penser arrêt toujours si ma conception devraient ê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 semble principalement utilisable, il ne devrait pas faire fuir les visiteurs ... ou rebond (pour être technique). A quoi bon une belle mise en page sans tableau de CSS serait pour le visiteur, qui est inconscient de tout l'hypertexte intelligent et Cascading Style Sheet sous la peau de votre page Web ... Zilch!
Il convient de belle apparence et être facile à utiliser ... puis vient la substance toutes les normes.

Je stumbbled en face 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 impressionnant 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 courrier, que 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 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 que votre interface utilisateur n'utilise pas les tables. Et alors? Qui se soucie si elle ne permet toujours pas les gens à atteindre leurs objectifs. Les standards du Web sont grandes, mais propres normes de gens comprennent faire avancer les choses (et c'est encore trop difficile à faire en ligne).

les concepteurs d'interface utilisateur 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 êtres humains - et non les validateurs de code - utilisent les interfaces ".

L'article complet Commander Jason Fried

DISCALIMER: Cela ne signifie pas que nous ne devrions pas se soucier de normes à tous. Normes sont bon d'avoir et de s'y tenir autant que possible. Il suffit de comprendre que la bonne conception de l'interface utilisateur ne signifie pas toujours 100% des 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. Faire DONOT utilisateur ressembler à un idoit totale, tout à fait incapable d'utiliser votre site web. Ce qui est mauvais!

2. Gardez Simplicité et facilité d'utilisation Retrouvez 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 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 riches, prototypage est toujours mieux que de simplement faire des représentations filaires simples et celui-ci est vide de interactions décent, il serait sûr 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 pourraient ê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 mode d'interactions et de gadgets imprévisibles.

6. Comprendre votre "Déclaration Design Mission". Emporter se concentrer 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 AJAX, fournir des repères visuels à l'utilisateur des changements à la page. L'utilisateur doit donné un accusé de réception de l'achèvement de toutes les tâches qu'il effectue. Donot font l'attente de l'utilisateur et deviner, pour par exemple. fournir des indicateurs de progrès pour uplaods de fichiers.

8. Utiliser des contrôles de manière appropriée. Pour exemple, utilisation Sélectionnez dans la liste déroulante pour les petites listes uniquement, donot laisser l'utilisateur choisir l'une des 200 villes en utilisant les listes de sélection. Comprendre la différence entre un bouton et un lien. Un lien et bouton ont des buts différents, donot utiliser un pour l'autre. Fournir le droit de contrôle à 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 absolument nécessaire. Définir 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ête à l'utilisation du site de rencontrerez.

9. Donot ITERATE trop sur la conception. Rappelez-vous! Le produit est entièrement 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 à savoir ce qui fonctionne et ce qui ne pas ramasser les points chauds. Comme une bonne interface prend du temps, donner du temps pour des itérations dans le début du cycle de développement, de sorte que les itérations de conception doesnot directement synonyme de 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 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 j'ai été 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 à la mienne (dont je parlerai un peu plus tard) ... vous pouvez faire une des actions suivantes pour exécuter des fonctions de onload mutliple ....

Ou quelque chose comme ceci

 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 windows.onload deux fois, plutôt que d'appeler deux fonctions dans une fonction onload unique? Voici rapide coup d'oeil à mon énoncé du problème ...

«Mes pages du site sont structurés comme le thème WordPress .... c'est à dire qu'il est un Header.php et footer.php commun qui obtient 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, à 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 sera plus-ride déjà attribué rappels dans le footer.php "

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

Eh bien! il ya peu de solutions que je ne trouve. Ils sont tous très semblables et surtout implémentations d'une solution proposée par Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solution:

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

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

Et appeler à la place de la "windows.onload" habituelle

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

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. C'est vraiment discret. Il peut être placé dans un fichier avec vos autres scripts ou dans un fichier séparé.
3. Cela 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 modèle Smarty

Tuesday, 24th Février 2009 Par Nikhil

J'ai pensé que celui-ci sera un doodle à trouver dans google, autant vous nous l'interface utilisateur 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 Smarty (. du tpl). J'ai réalisé que plus facile / popularité 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, c'était le résultat de fichier inclus. (Notez l'est ci-dessus utilisée inclure 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 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 feux d'artifice, etc
La raison pour laquelle, j'ai opté pour une ombre portée en utilisant le CSS est que, en général, tout en créant une page conception / html d'une application, les exigences garder itération. Ce que je veux dire, 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 les HTMLS d'ajouter ces divisions supplémentaires ou généralement la situation, c'est que vous avez une logique de boucle générer ces icônes / miniatures en XSL, PHP. JAVA ou tout autre langage de programmation / scripting, vous pouvez ajouter à tout moment, alors c'est juste la question de montrer 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 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 des astuces de mon précédent Tut (Well! ce sont probablement plus court variété de didacticiels, il est donc justifié de les appeler "Tut" 's) sur l'utilisation de CSS clip propriété de show off seulement

Image originale

original_image

Résultats CSS dropShadow
css_dropshadow_results
Voir la 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 les MooTools DEUX Knob (Pin) composant Slider (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 est venu mon temps pour entrer dans le plaisir, mais non agréés (pour moi) ofcourse eaux de la propriété CSS clip.

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 m'assois à 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 le clip de la propriété CSS)

Qu'est-ce que CSS clip faire?

Clip est 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 capture 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 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 séquence CSS / rect propriété comme ci-dessous!!

Exigences CSS clip

La tâche que nous avons commencé est à couper le Thumbnail image suivant dans une image carrée à la recherche (et aussi une image grand-angle)

original_imageclip_demo
Origine Thumbnal / image Exigences de clip pour Sqaure Thumbmail

Résultats CSS clip

clip_results

Voir la démo | Télécharger fichiers sources


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 à quelques reprises avant, quand je travaillais sur des sites plus tôt aussi, qui utilise 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 "ce 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 vraiment que c'était, pour afficher une liste de titres ou le dernier message sur une 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, c'est à dire http://www.inchembur.com/index.php

Etape 1: Dans votre index.php ajouter le morceau de code suivant, inclure le fichier d'API WordPress. Vous pouvez ajouter à la haut de la page vous voulez que votre message apparaisse sur.

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

Dans le morceau ci-dessus comprennent, nous obtenons que le seul poste le plus récent. si vous voulez essayer d'autres variantes, n'hésitez pas à creuser dans, 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 coiffure, 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 sur, 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 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 dynamique

Thursday, 25th Décembre 2008 Par Nikhil

Parfois, pour garder la 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 sur un simple clic de lien ou un bouton, etc.)

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

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

et vous pouvez avoir le lien de l'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');"> Charger 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 d'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 multi-navigateur. 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 l'instant ....

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 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ée pour accueillir d'autres navigateurs comme ci-dessous:

<meta http-equiv="X-UA-Compatible" content="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: Standards du Web, la compatibilité ascendante, et IE8

Remarque: Bien que beaucoup d'entre nous HTML / CSS personnes 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 CSS réinitialiser?

Tuesday, 11th Mars 2008 Par Nikhil

Une réinitialisation CSS est / sont CSS pour définir un certain nombre de modèles 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 est une pratique pour le réinitialiser premier à enlever / remettre les incohérences de la Croix-navigateur. CSS réinitialiser, sont quelques simples lignes de CSS que vous commencez votre CSS avec, vous donnant une base propre pour commencer à construire votre sur.

Le CSS réinitialise 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 (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