Unicode Lookup: convert special characters Cheat Sheet Download cheat sheet as printable PDF A5 Syntax Child: > nav>ul>li Sibling: + div+p+bq Climb-up: ^ div+div>p>span+em^bq div+div>p>span+em^^bq Grouping: () div>(header>ul>li*2>a)+footer>p (div>dl>(dt+dd)*3)+footer>p Multiplication: * ul>li*5 Item numbering: $ ul>li.item$*5 h$[title=item$]{Header $}*3 <h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3> ul>li.item$$$*5 ul>li.item$@-*5 ul>li.item$@3*5 ID and CLASS attributes #header .title form#search.wide p.class1.class2.class3 Custom attributes p[title="Hello world"] td[rowspan=2 colspan=3 title] [a='value1' b="value2"] Text: {} a{Click me} <a href="">Click me</a> p>{Click }+a{here}+{ to continue} <p>Click <a href="">here</a> to continue</p> Implicit tag names .class em>.class ul>.class table>.row>.col All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>. Alias of html:5 <! a a:link a:mail abbr acronym, acr base basefont br frame hr bdo bdo:r bdo:l col link link:css link:print link:favicon link:touch link:rss link:atom meta meta:utf img c
LoremPicsum Créer un sitemap - Centre d'aide Search Console Cette page explique comment créer un sitemap et l'envoyer à Google. En savoir plus sur les sitemaps Créer et envoyer un sitemap : Déterminez quelles pages de votre site nous devons explorer, ainsi que la version canonique de chaque page. Formats de sitemaps Nous acceptons plusieurs formats de sitemaps, décrits ci-après. Tous les formats imposent la même limite aux sitemaps : 50 Mo (sitemaps non compressés) et 50 000 URL. Voici un exemple très simple de sitemap XML indiquant l'emplacement d'une URL : <? Des exemples plus complexes et une documentation complète sont disponibles sur sitemaps.org. Vous y trouverez des exemples de sitemaps spécifiant des pages alternatives et de sitemaps pour les actualités, les images ou les vidéos. Si vous possédez un blog doté d'un flux RSS ou Atom, vous pouvez envoyer l'URL du flux en tant que sitemap. Nous acceptons les flux RSS 2.0 et Atom 1.0. Encodez votre fichier en UTF-8.
Web Starter Kit — Web Fundamentals Download Web Starter Kit (beta) What is Web Starter Kit? Web Starter Kit is an opinionated boilerplate for web development. Tools for building a great experience across many devices and performance oriented. Features Quickstart Download the kit or clone the repository and build on what is included in the app directory. There are two HTML starting points, from which you can choose: index.html - the default starting point, containing Material Design layout.basic.html - no layout, but still includes our minimal mobile best-practices Be sure to look over the installation docs to verify your environment is prepared to run WSK. Web Performance Web Starter Kit strives to give you a high performance starting point out of the box. Browser Support At present, we officially aim to support the last two versions of the following browsers: ChromeEdgeFirefoxSafariOperaInternet Explorer 9+ Troubleshooting A Boilerplate-only Option Docs and Recipes File Appendix - What do the different files here do? Inspiration
CSS Shapes, une introduction L'article de Sara Soueidan paru dans A List Apart a fait le buzz dernièrement. Sara présente ici avec clarté ce qui sera l'avenir des formes et du design dans CSS. Par Sara Soueidan Des rectangles dans des rectangles, telle est depuis toujours la structure de nos pages web. La nouvelle spécification CSS Shapes change tout cela. Dans l'image qui suit par exemple, remarquez comment le texte entoure les images circulaires. Regardons maintenant la façon dont fonctionne Shapes, et comment vous pourrez l'utiliser. Pour l'instant, CSS Shapes est supporté par Webkit Nightly et par Chrome Canary, mais le module niveau 1 en est au statut de Recommandation, donc les propriétés et la syntaxe définies dans les spécifications sont stables et devraient être mises en oeuvre d'ici peu par les autres navigateurs. Les prochains niveaux de CSS Shapes concerneront l'insertion d'un contenu à l'intérieur d'une forme. Créer une forme avec CSS Shapes circle()ellipse()inset()polygon() ou bien : mais...
Stitches - An HTML5 sprite sheet generator Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers. Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Stitches is developed by Matthew Cobbs in concert with the lovely open-source community at Github. Copyright © 2013 Matthew Cobbs Licensed under the MIT license. Implementation After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done: The sprite sheet generator is automatically created in elements that have the stitches class: If you choose, any images that are a part of the initial markup will be loaded onto the canvas: Documentation Documentation is available here. Dependencies jQuery 1.7.1, Modernizr 2.0.6, Bootstrap 2.3.0 New Contributing License Download
jQuery.mmenu, app look-alike menus with sliding submenus Waves Action/Event Works fully with jQuery and JavaScript click event handlers, like Snarl Download the latest version of Waves from Github repository. You can also install it via Bower with bower install waves or via npm with npm install node-waves. Include waves.min.css and waves.min.js to your HTML file and Waves is ready to use! <! Advanced: Waves also provide LESS, SCSS, and SASS source. Attach the effect To attach Waves's effect (or we usually called it as "the ripple") to HTML element, you can use Waves.attach() <a href="#" class="button">Click Here</a><script type="text/javascript"> Waves.attach('.button');</script> Waves.attach() comes with 2 parameters, the first is DOM element that you want to be attached (or string that represent it, like jQuery), and the second one is array of CSS classes that will be put on the element. <a href="#" class="button">Click Here</a><script type="text/javascript"> Waves.attach('.button', ['waves-button', 'waves-float']);</script> Initialize Helper classes <!
Le guide ultime pour accélérer son développement frontend Il existe deux types de développeurs : ceux qui développent vite (et bien) et les autres. En tant que développeur frontend vous vous êtes sûrement déjà rendu compte que certaines parties de votre travail/passion était redondantes et qu'il était souvent possible d'aller plus vite. Bref, je vais vous apprendre à passer au niveau supérieur de productivité à travers une (longue) liste de conseils et d'astuces glanées sur le web. Sommaire 1. Avant toute chose je tiens à vous faire remarquer que ce guide est le fruit de ma réflexion et de mon expérience du développement frontend. Cet article provient à l'origine d'un post sur Quora que j'ai écrit pour répondre à la question "Quelles sont les meilleurs astuces pour gagner du temps lors d'un développement front ?". 2. Pendant longtemps sur mes projets personnels j'ai pris l'habitude de toujours débuter en négligeant la phase de conception. Astuce n°1 : Ne jamais mettre la charrue avant les boeufs Définir les grandes lignes Réaliser des prototypes
Geek Me Up - Devenez Geek ! | Maîtrisez le web et le mobile !Geek Me Up – Devenez Geek ! | Maîtrisez le web et le mobile !