Stateful Elements Respond to Touch — Web Fundamentals See Pseudo classes for touch states: Hover and Focus Stickiness On most mobile browsers hover and/or focus states will apply to an element after it’s been tapped. Consider carefully what styles you set and how they will look to the user after they finish their touch. Bear in mind that anchor tags and buttons may have different behaviour in different browsers, so assume in some cases hover will remain and in others focus will remain. Enabling Active State Support on iOS Unfortunately, Safari on iOS does not apply the active state by default, to get it working you need to add a touchstart event listener to the document body or to each element. You should do this behind a user agent test so it’s only run on iOS devices. Adding a touch start to the body has the advantage of applying to all elements in the DOM, however this may have performance issues when scrolling the page. Override Default Browser Styles for Touch States
CSS3 + Progressive Enhancement = Smart Design Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.. CSS3 can do some pretty amazing stuff: text shadows, rgba transparency, multiple background images, embedded fonts, and tons more. It’s awesome, but not all browsers are up to snuff. Among these generalized strategies, the second approach comes closest to the concept of progressive enhancement. A Quick Example Consider a basic layout done with good ‘ol CSS 2.1 and HTML 4.01. basic layout and compositionbackground, border, and font colorsfont families, styles, and transformationsbasic styles for HTML elementsdecorative graphics, link styles and so on The idea here is to begin with a nice, well-styled presentation that looks good in even archaic browsers like IE6. CSS 3 and Progressive Enhancement Progressive enhancement provides a well-defined strategy for implementing CSS3 into the presentational layer of our designs.
Se lancer dans Sass Qui a encore peur aujourd'hui de Sass et des préprocesseurs en général ? David Demaree nous montre dans cette introduction claire et complète la simplicité et l'utilité de Sass. Indispensable, vraiment. *Par David Demaree* La simplicité de CSS est depuis toujours l’une de ses caractéristiques les plus agréables. Il y a eu des propositions pour améliorer CSS – l’ajout de constantes ou de variables par exemple – mais aucune n’a été mise en oeuvre par les principaux navigateurs. Heureusement, il y a quelques années les développeurs Hampton Catlin et Nathan Weizenbaum ont proposé une meilleure façon de gérer des feuilles de style complexes. La nouvelle syntaxe de feuilles de style s’appelle Sass, pour “syntactically awesome style sheets” (feuilles de styles syntactiquement super). C’est pourquoi Sass 3.0 a introduit une nouvelle syntaxe, plus proche de CSS, appelée SCSS (“Sassy CSS” qu’on pourrait traduire par “CSS à la Sass” ou bien "CSS classieux"). On commence ! Ne vous répétez pas Mixins
11 Mixin Libraries For Sass Designers Should Get If you use Sass in your development workflow, you know the importance of mixins. When you see some things that are written repeatedly and tediously in CSS, that’s where mixins can help you prevent repetitive work. A mixin contains CSS declarations that you can reuse throughout your site. Pin it There are many mixins are made by developers, to help you when working with Sass in your development. Most cover things that often repetitive in CSS. Recommended Reading: A Simple And Easy Guide To Understand Sass 1. Bourbon is a Sass library that contains mixin, functions, and addons that let you simplify the creation of stylesheets for cross-browser use. Check out the complete documentation to use each available mixin and function. 2. Sass CSS3 Mixins provide mixins that works across different browsers. Download this mixin here. 3. Want to filter your image with stunning effect in Sass? 4. 5. Breakpoint helps you make media queries through Sass a simple manner. 6. 7. 8. 9. 10. 11.
Implement Custom Gestures — Web Fundamentals Add Event Listeners Touch events and mouse events are implemented on most mobile browsers. The event names you need to implement are touchstart, touchmove, touchend and touchcancel. For some situations, you may find that you would like to support mouse interaction as well; which you can do with the mouse events: mousedown, mousemove, and mouseup. For Windows Touch devices, you need to support Pointer Events which are a new set of events. Touch, mouse and Pointer Events are the building blocks for adding new gestures into your application (see Touch, mouse and Pointer events). Include these event names in the addEventListener() method, along with the event’s callback function and a boolean.
An inline-block intervention Tell me the last time you used a <b> element in your markup. How about a <blink> tag? If you answered ‘today’, then this post will hopefully be eye opening for you. So, the reason why we don’t use the <b> tag for bolded text is because we’re interested in the separation of content and style. Cool? So let’s talk about inline-block inline-block entered the web dev scene around 2008 as part of CSS2.1 and everyone loved it. What inline-block does is provide inline positioning of an element, much like a span, em, strong or a element, but also allows widths and dimensions to be applied to it. So somewhere along the way, someone decided, “hey, I don’t need floats, I can just set my elements to display:inline-block”, and the web-dev community shouted, “Yes”. Except one little problem exists. What that means is that it acts just like a span, em, strong or a element would and reacts to whitespace next to it. So here’s where inline-block bothers me. Let’s review some inline-block fixes Ugh.
Sass Un article de Wikipédia, l'encyclopédie libre. Sass (Syntactically Awesome Stylesheets) est un langage de génération dynamique de feuilles de style initialement développé par Hampton Catlin et Nathalie Weizenbaum. Sass est un métalangage de feuilles de style en cascade (CSS). C'est un langage de script qui est interprété en CSS. SassScript est le langage de script lui-même. Deux syntaxes existent. Sass peut être étoffé avec Compass (pratique pour les préfixes des différents navigateurs). Articles connexes[modifier | modifier le code] Liens externes[modifier | modifier le code] Site officiel Digging Into Sass - A Guide A while ago Thoriq Firdaus wrote a great article about getting started with Sass which showed you how to install and use this highly useful CSS preprocessor language (you might want to check it out, you know, to get started). In this article I thought I’d give you a bit more insight into what you can do with Sass and how developers use it every day to create better and more modular CSS code. Skip ahead to the section you want: Recommended Reading: Using Bootstrap 3 With Sass Tools Of The Trade Thoriq showed you how you can use Sass from the command line using the sass --watch command. If you prefer GUI tools, you can go with my personal favourite app, Codekit, a web developer tool for compiling Sass, concatenating, autoprefixing and much more. If you just want to try out Sass without paying for anything you can use the terminal, or Koala (here’s our review), a free cross-platform feature-rich app, which can hold its ground against premium counterparts. Variables Nesting Extending Rulesets