<length> Le type de données CSS <length> correspond à une mesure de distance. De nombreuses propriétés CSS utilisent des valeurs de longueurs. Entre autres, on pourra énumérer width, margin, padding, font-size, border-width, text-shadow, … Pour certaines propriétés, l'utilisation d'une longueur négative est une erreur de syntaxe, pour d'autres, elles sont autorisées. On notera que bien que les valeurs <percentage> soient aussi des dimensions CSS et acceptées par certaines propriétés CSS acceptant les valeurs <length>, ce sont bien deux types distincts. Syntaxe Une longueur est un nombre (type <number>) immédiatement suivi d'une unité de longueur (px, em, pc, in, mm, …). Interpolation Les valeurs du type <length> peuvent être interpolées de manière à rendre les animations possibles. Unités Unités de longueur relatives Longueurs liées à la police em Cette unité représente la font-size calculée de l'élément. ex Cette unité représente la hauteur d'x de la font de l'élément. cap ch ic lh rem rlh vb vh vi vw vmin vmax px q
CSS: Center text/image/div in middle of parent div (container) | CSS-WORKSHOP.COM It is a common situation, that you want to put some element (like text, image or div) in the center (horizontally and vertically) of parent div (container). Setting some element in the center horizontally is usually quite easy – just put CSS rule “margin: 0 auto” to element or “text-align: center” to its parent element and it is done. But when we want to put html element in center vertically – then it is not so easy! You can try to use “vertical-align: middle;” but quickly you will discover that it is not so easy to use. It works not as we expect. Check code below, of course, “vertical-align: middle;” is not working as we want. And as you can see, it is not working 😉 “vertical-align: middle;” works in different way than we could think. So now the question is: How to center vertically one element inside another? The answer is easy – we must use one trick and combine two rules coming with CSS3. Check code below 🙂 And thats it! Tags: css, css3, html
Les 3 leviers à activer pour optimiser sa stratégie web to store - E-Hello De plus en plus de consommateurs se renseignent sur internet avant d’aller acheter en magasin*, la présence en ligne d’un commerce ou d’une TPE nécessite donc un ensemble de pratiques pour qu’elle soit efficace. Voici quelques conseils pour votre stratégie web to store. Web to store #1 : D’abord, s’assurer d’être présent partout avec des informations à jour Nous en parlions récemment ici, il est essentiel que vos informations de base soient correctes. Moyens de contacts, adresse et horaires d’ouverture sont les trois points indispensables qu’il faut mettre à jour sur vos différents lieux de présence en ligne : votre site, PagesJaunes, Google Mybusiness, Facebook… Web to store #2 : Ensuite, indiquer quels sont les produits disponibles en magasin Même si vous ne vendez pas via internet, rien ne vous empêche de proposer à vos clients la liste des produits disponibles chez vous. Web to store #3 : Enfin, communiquer efficacement auprès de vos clients
css - Vertically center image on page and maintain aspect ratio on resize Tutoriel Vidéo HTML-CSS Présentation de Susy Lorsqu'il s'agit de créer des grilles en CSS plusieurs solutions s'offrent à nous, on peut utiliser des Frameworks comme Twitter Bootsrap ou générer une série de classes pour placer nos éléments. Le problème dans ce cas-là est que l'on brise la règle essentielle qui est de séparer le fond de la forme et on se retrouve du coup avec des classes HTML qui déterminent le style de notre élément. Cette manière de faire est certes pratique lorsque l'on prototype l'application, mais s'avère relativement limitée lorsque l'on souhaite faire évoluer le site (on se retrouve alors à devoir modifier le code HTML pour changer la disposition des éléments). Installation de susy Avec ruby SASS Avant d'installer Susy, sachez que celle-ci (je parle d'elle au féminin, car son auteur en fait autant !) gem install susy --pre // le --pre permet d'installer la dernière version de de Susy (2.0) et non pas la première require "Susy" @import "susy"; Voilà Susy est maintenant chargée. Avec libSASS npm i susy --save-dev
Asynchronous vs Deferred JavaScript In my article on Understanding the Critical Rendering Path, I wrote about the effect JavaScript files have on the Critical Rendering Path. JavaScript is considered a "parser blocking resource". This means that the parsing of the HTML document itself is blocked by JavaScript. When the parser reaches a <script> tag, whether that be internal or external, it stops to fetch (if it is external) and run it. This behaviour can be problematic if we are loading several JavaScript files on a page, as this will interfere with the time to first paint even if the document is not actually dependent on those files. Fortunately, the <script> element has two attributes, async and defer, that can give us more control over how and when external files are fetched and executed. Normal Execution Before looking into the effect of the two attributes, we must first look at what occurs in their absence. Take, for example, this script element located somewhere in the middle of the page - <html><head> ...
L’intérêt du SEO pour les entreprises du bâtiment et de l’industrie | WPNormandie Aujourd’hui, encore trop d’entreprises négligent leur stratégie de développement sur internet. Certaines sociétés du bâtiment ayant besoin de se faire connaitre, préfèrent faire appel à un commercial B2B plutôt que de mettre en place une politique de référencement naturel. Pourtant bien souvent les acheteurs débutent leur recherche d’information seul devant un ordinateur. Une visibilité accrue et un trafic ciblé Le SEO ou référencement naturel ouvre la voie vers de nouvelles sources de trafic pour votre site internet. Un positionnement efficace sur les moteurs de recherches permet d’occuper plusieurs positions et ainsi de placer plusieurs pages d’un même site sur une même requête. Bien moins couteuse qu’un poste de commercial B2B, une stratégie de référencement naturel permet en plus de se développer sur le plan local et international, tout en ayant une présence en continu, 24 heures sur 24. Pourquoi mettre en place une stratégie SEO ? Amélioration des objectifs de conversion
html - CSS scale down image to fit in containing div, without specifing original size Le modèle des boîtes Contenu Le modèle des boîtes de CSS décrit les boîtes rectangulaires qui sont générées pour les éléments de l'arbre du document et qui sont assemblées selon le modèle de mise en forme visuel. La boîte de page, qui en représente un cas particulier, est décrite plus en détails au chapitre sur les médias paginés. 8.1 Les dimensions des boîtes Chaque boîte possède une aire de contenu (ex. une texte, une image, etc.) entourée en option par une aire d' espacement , une aire de bordure et une aire de marge ; Le schéma suivant illustre les relations entre ces aires et la terminologie employée pour les désigner : On peut subdiviser la marge, la bordure et l'espacement selon qu'il s'agisse du côté gauche, droite, haut ou bas (ex. dans le schéma, "MG" mis pour marge gauche (N.D.T. margin-left), "ED" mis pour espacement droit (N.D.T. padding-right), "BH" mis pour bordure haute (N.D.T. border-top), etc.). Le bord du contenu ou bord interne Celui-ci entoure le rendu du contenu de l'élément. Le bord de l'espacement
Strategies for Keeping CSS Specificity Low Easily manage projects with monday.com Keeping CSS specificity low across all the selectors in your project is a worthy goal. It's generally a sign that things are in relative harmony. You aren't fighting against yourself and you have plenty of room to override styles when you need to. Specificity on selectors tends to creep up over time, and there is a hard ceiling to that. So how do we keep that specificity low over time? #Give yourself the class you need Perhaps you're writing a high-specificity selector because you're overriding an already-existing selector. .section-header { /* normal styles */} body.about-page .section-header { /* override with higher specificity */} However you feel about this, recognize that that specificity is creeping up here. <header class="<%= header_class %>"> Which could output one class, or both, as desired. .section-header { /* normal styles */} .about-section-header { /* override with same specificity */ /* possibly extend the standard class */} But sadly:
SEO CAMP : Vendre n’importe quoi sur le web grâce au SEO | WPNormandie Lors du SEO CAMP de Caen, Sylvain Vandewalle a fait une conférence ayant pour sujet « Vendre n’importe quoi sur le web grâce au SEO ». Ce Normand nous apporte une vision claire sur le SEO mais aussi sur l’impact du SEO sur les sites d’ecommerce. Pendant plus de 30 minutes vous pourrez découvrir ce que le SEO apporte aux sites internet d’ecommerce. Contrairement aux idées reçues, on peut effectivement vendre n’importe quoi sur Internet et le SEO vous y aidera grandement. Si vous n’y connaissez rien au SEO, Sylvain vous expliquera ce que sont les trois piliers du SEO : la technique, le « on Site » et le « off site ». « Il n’y a pas ou peu de budget pour le SEO », c’est le constat actuellement dans l’univers du Web. Avec des exemples concrets, il illustre chiffres à l’appui le SEO pour l’Ecommerce. Bref plein de contenus avec à la fin une séance de questions/réponses très instructive. Une vidéo à voir absolument si le SEO est une préoccupation pour vous.