background preloader



Icon System with SVG Sprites I’ve been a big proponent of icon fonts. Lots of sites really need a system for icons, and icon fonts offer a damn fine system. However, I think assuming you’re good with IE 9+, using inline SVG and the <use> element to reference an icon is a superior system. First let’s cover how it works. A nice way to handle your icons is to have a folder full of .svg files. They can be colored, not colored, multiple shapes, sizes, whatever. You can let Illustrator (or whatever) save it however, with all the cruft that comes along for the ride: Combine the .svg files You can manually do this if you want. It should just be an <svg> tag, with a <defs> tag (which just means you are defining stuff to use later), and then a bunch of <g> (group) tags. Again you can do that by hand, but of course that’s a bit laborious. If you’ve never used Grunt, you can do it. You can install it with: npm install grunt-svgstore --save-dev Make sure the task is available with: grunt.loadNpmTasks('grunt-svgstore'); <! Browser Support

Les classes conditionnelles en HTML Les cancres du Web, Internet Explorer 6, 7 et parfois 8, nous mènent souvent la vie dure. Même quand on s’abaisse à leur niveau, il leur arrive de ne pas comprendre, ou d’y mettre de la mauvaise volonté. La solution classique (comprendre: à l’ancienne) est d’utiliser des hacks CSS. Nous allons voir dans cet article que l’utilisation habituelle des commentaires conditionnels a quelques inconvénients, et proposer une technique qui combine plusieurs avantages : les classes conditionnelles. Le problème des commentaires conditionnels Les commentaires conditionnels se présentent comme des instructions dotées d’une condition (if) et qui peuvent se placer à n’importe quel endroit du document (X)HTML. Il s’agit d’un mécanisme propre à Internet Explorer Windows, né avec la version IE5, et qui permet d’inclure dans une page HTML, de manière valide, une portion de code qui ne sera lue et interprétée que par IE, ou par l’une ou l’autre de ses versions. Une alternative ?

Inline SVG vs Icon Fonts [CAGEMATCH] | CSS-Tricks If you're building an icon system for a site, you have some options. If you know the icons need to be raster images, then you'll likely be using CSS sprites. If the icons will be vector images (much more common these days), you have some options. Two of those options are using inline SVG and using icon fonts. Let's compare. Icons are Vector There are big advantages to vector icons: resizable up and down without losing quality, extra sharp on retina displays, and small file size among them. In a recent personal example, while converting some icons from fonts to SVG on CodePen, some of the font icons were noticeably less sharp than the ones I converted over. CSS Control The big win for inline SVG here is probably multi-color icons. Positioning Weird Failures Forced Failures Semantics Accessibility Ease of Use Browser Support Winner It all comes down to browser support.

Guide de survie du positionnement CSS Cet article s'adresse à ceux qui ont déjà quelques notions de positionnement CSS, mais qui se demandent s'ils l'utilisent correctement, ou qui galèrent pour mettre en pratique leurs connaissances encore trop bancales. Comment s'y retrouver dans le machin tentaculaire qu'est le positionnement CSS? C'est un sujet à la fois complet (tant mieux) et complexe (ouille). Pour bien l'appréhender, il faut prendre en compte: les possibilités de CSS 2.1 pour l'affichage et le positionnement des éléments (et à l'avenir de CSS 3); celles qui sont implémentées dans les navigateurs (et donc pas les autres, sauf pour préparer l'avenir); les contraintes de mise en page et d'adaptation aux contenus (le contenu, ça va ça vient… et ça vous surprend toujours d'une manière ou d'une autre); les contraintes du média screen (on ne fait pas tout et n'importe quoi avec les hauteurs et largeurs, le centrage, etc.); les bugs éventuels des navigateurs (ou de certains navigateurs). Comment s'y retrouver?

Please Stop "Fixing" Font Smoothing - The Usability Post I wrote two posts on the topic of WebKit font smoothing before, but unfortunately the situation has grown worse since then. In allowing the designer to pick their own font smoothing mode with the -webkit-font-smoothing CSS property, WebKit developers have opened up an opportunity for typographic abuse, namely, the disabling of subpixel font rendering. As I mentioned before, WebKit gives designers three font smoothing modes: Nothing, which gives you jagged fontsSubpixel-rendering, i.e. the default font smoothing mode that is used for most other stuff on your desktop OS (mobile devices don’t use subpixel rendering due to having to suport both vertical and horizontal screen orientations)Antialiased, which disables subpixel-rendering and smoothes the font on the level of the pixel, as opposed to the subpixel. Why the choice? Abusing antialiasing But upon closer inspection, antialiased text is always blurrier than subpixel rendered text. It’s not a “fix” Why do designers keep misusing it?

Css2Less iconic/illustrator-svg-exporter Height equals width with pure CSS Description If you have an image with a certain aspect ratio you can easily keep the proportion with the "auto" value. Like: The problem is that you can't use the "auto" value for the height property of a block element like a DIV or alike. The trick I found a solution which was already posted four years ago on A List Apart. <div class='box'><div class='content'>Aspect ratio of 1:1</div></div> We need two block elements to achieve the desired behaviour. So, what's this? So our box is already as high as wide. The content And here is the trick: We just position the content element as absolute with all four orientations set to 0. That's it. Other aspect ratios If you want to create other ratios just change the padding-top value of the pseudo element (see example): IE7 and below Since IE is IE and especially IE7 is everything but a browser, you have to create the pseudo element yourself in your markup if you like to support that shit.

The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!) by Joel Spolsky Wednesday, October 08, 2003 Ever wonder about that mysterious Content-Type tag? You know, the one you're supposed to put in HTML and you never quite know what it should be? Did you ever get an email from your friends in Bulgaria with the subject line "???? I've been dismayed to discover just how many software developers aren't really completely up to speed on the mysterious world of character sets, encodings, Unicode, all that stuff. But it won't. So I have an announcement to make: if you are a programmer working in 2003 and you don't know the basics of characters, character sets, encodings, and Unicode, and I catch you, I'm going to punish you by making you peel onions for 6 months in a submarine. And one more thing: In this article I'll fill you in on exactly what every working programmer should know. A Historical Perspective The easiest way to understand this stuff is to go chronologically. And all was good, assuming you were an English speaker. Unicode Hello Encodings Right?

Magnific Popup: Responsive jQuery Lightbox Plugin Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js). Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML content in each gallery item and mix content types. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS. Popup with video or map In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered. Dialog with CSS animation Animations are added with simple CSS transitions, you can make them look however you wish.More animation effects on CodePen. Popup with form Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button. Ajax popup Fast

Centering in CSS: A Complete Guide Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for. So let's make it a decision tree and hopefully make it easier. I need to center... Horizontally Is it inline or inline-* elements (like text or links)? You can center inline elements horizontally, within a block-level parent element, with just: This will work for inline, inline-block, inline-table, inline-flex, etc. Is it a block level element? You can center a block-level element by giving it margin-left and margin-right of auto (and it has a set width, otherwise it would be full width and wouldn't need centering). This will work no matter what the width of the block level element you're centering, or the parent. Note that you can't float an element to the center. Is there more than one block level element? Vertically