background preloader

Bonnes pratiques pour les déclarations @font-face

Bonnes pratiques pour les déclarations @font-face
Petit rappel historique À l’origine, les déclarations CSS @font-face faisaient partie de la norme CSS 2.0 et étaient supportées aussi bien par Internet Explorer 6 que par Netscape 4. Nous étions alors à la fin des années 90 et la guerre entre ces deux navigateurs faisait rage. Malheureusement, les constructeurs ainsi que les fondeurs ne parvinrent pas à se mettre d’accord à l’époque sur un format de fonte et le haut débit n’étant pas encore généralisé, cette technologie ne fut que peu ou pas utilisée. En conséquence, lors de l’écriture de la norme CSS 2.1, cette fonctionnalité fut purement et simplement supprimée. Avec CSS 3, c’est le grand retour en force des fontes web à travers le module CSS Fonts qui redéfinit la méthode d’insertion des fontes personnalisées dans les navigateurs. Déclaration simplifiée Une déclaration simple ressemble à ça : La propriété font-family permet de définir le nom de la fonte tel qu’il sera utilisé par la suite dans les déclarations de style. Les alternatives

Les transitions en CSS3 – Mouseover et Mouseout sans JavaScript Manière un peu originale d’aborder les transitions, j’ai lu un article en anglais il n’y a pas longtemps qui proposait d’étudier les transitions sur l’événement hover en CSS. Par défaut, la transition sur cet événement comme on a l’habitude de l’utiliser nous propose des effets équivalents au «mouseover» comme au «mouseout». Nous allons voir assez simplement comment diviser en deux les effets de transitions pour proposer un effet au survol différent de l’effet de transition au moment où la souris quitte l’élément. Les propriétés CSS 3 demandent un préfixe pour les navigateurs (-moz-, -webkit-, etc.) que je n’ai pas précisé ici. Rappel sur transition en CSS 3 Pour créer une transition en CSS 3, vous aurez besoin de plusieurs informations, dont : l’effet recherché (et sa correspondance en propriété CSS), la durée et éventuellement le scénario. Je ne vais pas refaire un article complet sur les détails de ces propriétés, il y en a un très bien fait sur Alsacréations.com par Antoine Cailliau.

Comment utiliser une fonte «non-standard» sur un site Web Il est de notoriété publique que l'usage des fontes sur le Web est limité à une poignée de fontes non pas standardisées, mais suffisamment répandues pour pouvoir être utilisées sans trop de risques. Et cela pour une raison très simple: la police de caractères que l'on souhaite utiliser doit être présente sur le système de l'utilisateur pour être utilisée par le navigateur. Quand @font-face tombe à l'eau CSS 2 (publié en 1998) comprenait un mécanisme qui autorisait les auteurs de pages web à proposer une fonte au téléchargement, fonte qui serait ensuite utilisée dans la page. la plupart des fontes disponibles sont protégées par le droit d'auteur et ne peuvent pas être redistribuées, y compris comme fonte «intégrée» à un site web; les fontes rajoutaient un poids conséquent aux pages (jusqu'à plusieurs centaines de Ko); les développeurs des navigateurs étaient peu enclins à affronter les deux problèmes ci-dessus (surtout le premier). Quand @font-face revient Google Web Fonts Font Squirrel

5 alternatives à Notepad++ pour Mac Notepad++ est sans aucun doute le meilleur éditeur de code source pour Windows. Le problème, c’est qu’il n’existe pas pour Mac ! Débarqué récemment sur Moutain Lion, il m’a fallu quelques temps pour retrouver mes bonnes vieilles habitudes. 1. Certainement l’une des meilleures solutions gratuites, TextWrangler se démarque avec quelques options comme : une interface agréable qui vous permet de travailler en plein écran, une organisation des fichiers en cours d’édition dans une barre latérale, des couleurs différentes en fonction des balises. 2. Logiciel gratuit qui propose une interface simple grâce à une navigation par onglets et plus de 60 langages de programmation. 3. gedit L’éditeur de texte officiel de l’environnement GNOME qui supporte aussi les caractères Unicode, la surbrillance pour divers langages de programmation, un outil de recherche et de remplacement, la création automatique de fichiers de sauvegarde. 4. 5. Et vous, quelle alternative à Notepad++ utilisez-vous sur Mac ?

Adobe Edge Web Fonts Ecommerce Software & Ecommerce Platform Solutions | Magento Warby Parker Eye wear, innovation, strong results, strong brand, great story Harpers Bazaar Fashion industry, recognizable brand, scalability, and flexibility Gant International brand, fashion, performance, global expansion, strong results MARIE & JULIEN Templates email gratuits Templates email gratuits Cet article a 4 années. Il commence à dater, lisez-le donc en gardant son âge en tête ! publié le Lu 7 966 fois. Petite ressource du week-end trouvée durant la semaine par un collègue de travail (ouais moi je bossais, ce sont mes collègues qui ne sont pas sérieux :p) : des templates HTML/CSS/PSD pour vos emailing.Il y a de très jolies graphismes de toutes les sortes avec des intégrations optimisées pour la majorité des plateformes mail. Découvrez donc ces templates ainsi que leur créateur sur le site de CampaignMonitor.com. De nombreux styles à télécharger parmi une centaine de template : Et… voilà c’est tout. Enjoy ! Liens utiles : - CampaignMonitor.com - MailChimp.com À propos de Geoffrey Intégrateur et designer web, fondateur de Creative Juiz, il a trouvé marrant et juste de partager ses recherches, astuces et ressources sur les sujets comme CSS, HTML, JavaScript, PHP, WordPress, etc. grâce aux articles que vous trouverez sur ce blog. Laisser un commentaire

Ergonomie web et logiciel, architecture de l'information, utilisabilité sites Internet – Ergolab

Related: