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 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 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 à 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 une des conditions suivantes.

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 alternativement

"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 UI

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 celle d'un designer, sans aucun regret. Tant Pis! Que devais-je écris au sujet? ... Pendant un certain temps (doit être dans les années 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 trop). 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 l'hypertexte intelligent et Cascading Style Sheet sous la peau de votre page Web ... Zilch!
Il devrait l'air agréable et être 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 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 ... Je suis heureux de lire son poste, que je suis totalement d'accord avec ce qu'il a à dire et l'aussi le fait, elle 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 de parler de CSS et XHTML et des normes et de l'accessibilité et ne parle pas assez de gens. CSS et les normes conforme Code sont seulement des outils - vous devez savoir ce qu'il faut construire avec ces outils. Super, je suis heureux que votre interface ne pas utiliser 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 qui 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 meilleure. Les êtres humains - et non les validateurs de code - interfaces d'utilisation ".

L'article complet de Jason Fried Commander

DISCALIMER: Ce ne veut pas dire que nous ne devrions pas se soucier de normes à tous. Les normes sont bien 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 leçons apprises, je suis un peu UI Design et règles d'or pour le développement ... Heres le TOP 10 ... pas que vous devez 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 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 convivialité, l'accessibilité et les normes. Utiliser les normes de manière efficace et 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 sont riches, prototypage est toujours mieux que de simplement faire des représentations filaires simples et ce dernier est dépourvu de interactions décents, 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! prototypage avec tous les 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 utilisateur avec des interactions et des gadgets imprévisibles.

6. Comprendre votre "Déclaration de 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 modifications apportées à la page. L'utilisateur a donné à une reconnaissance 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 les commandes de manière appropriée. Pour exemple, 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 l'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 standard, les personnaliser seulement si très 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ê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 de 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, 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 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 supercherie que je devais creuser autour parce que la situation commaned il. Dans l'un de mes sites web, je devais 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, je l'ai forgotton 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 selon mon expérience récente, seule la dernière fonction (onloadfn3) sera malade effectivement exécutée.

Dans les situations normales, contrairement à la mine (dont je vais vous parler un peu plus tard) ... vous pourriez faire une des actions suivantes pour exécuter des fonctions de 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 regard rapide sur mon relevé de problème ...

«Mes pages du site sont structurés comme le thème 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 de quelque chose de leur propre onLoad, en dehors 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 "

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

Eh bien! il ya quelques solutions que je ne trouve. Ils sont tous très semblables et surtout des implémentation 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 au lieu de la "windows.onload" habituel

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

Avantages de ce bout de code ...
1. En premier lieu, il vous permet d'avoir de multiples é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 à l'intérieur d'un modèle Smarty

Tuesday, 24th Février 2009 Par Nikhil

Je pensais que celui-ci sera un doodle pour trouver dans google, comme beaucoup, vous nous l'interface utilisateur et scénaristes auraient besoin pour ce faire sur un jour après jour, soit inclure un peu de morceau de code PHP extrait (.php) dans un Smarty Template (.tpl). Je réalisai 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 en tant que texte, ce que je voulais é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 peu .... Je suis tombé sur une syntaxe slighty modifiée, qui était la réponse à ma condition ... si elle est ici ... si vous croirez pas 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 il é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 opté pour l'ombre portée en utilisant le CSS est que, généralement, tout en créant une conception de page / html d'une application, les exigences garder itération. Ce que je veux dire 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 été déjà déchargé pour ajouter ou supprimer l'ombre, pour que 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 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 cachant ces ombres en utilisant la propriété CSS d'affichage, selon les besoins changeants des clients jamais ... Je havn't fait ce genre de réflexion prospective avant 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 se justifie que les qualifiant de «Tut" 's) à propos de l'aide de CSS clip de la 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. Il était tellement vrai pour moi aussi et a été très heureux de le négliger, jusqu'à ce que je commencé à modifier le 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 la mienne, chaque fois que je siégerai pour retravailler sur mon Script curseur ... Je dois tokeep renvoyant à l'utilisation de cette propriété CLIP, pour me rappeler la logique que je l'ai créé dans mon script .... D'OÙ! pensé à la plume vers le bas, avec un espoir de le rappeler le futur (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 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 la création de vignettes sans avoir à créer des fichiers supplémentaires (je dois 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 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 je dis? .... D'où 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 dans 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 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, je continuais procastinating, pensant "ce nest pas mon morceau de gâteau". Finalement! cette exigence est venu jusqu'à mon nez, quand a commencé diggin autour d'un peu de solution.
Je fus surpris de trouver qu'il était vraiment plus facile que je ne le 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-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

Etape 1: Dans votre index.php ajouter le peice de code suivant, inclure le fichier d'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 se sentent libres de creuser, 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, se sentir libre de vos divisions annonce de coiffage, travées et les classes selon vos besoins de conception.

Etape 3: Il n'y a pas Étape 3 ... thats it ... vous avez terminé!


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 afficher un poste / page spécifique par opposition à le dernier message: -
Cela peut facilement achived en modifiant les arguments pour 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 simple 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 appel suivant partout 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 (ciblant 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 dans l'obtention de 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 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 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, cette syntaxe peut être utilisée 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: 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 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 la rédaction de cross-browser de CSS. Alors, quand nous commençons à écrire notre CSS, Il est une pratique pour le réinitialiser premier à supprimer / réinitialiser toutes 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 normalement tendance à utiliser 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;
}


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

html {font-size: 76%;}

Le CSS-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