background preloader

Les commentaires conditionnels pour Internet Explorer

Les commentaires conditionnels sont un mécanisme propre à Internet Explorer Windows, qui permettent d'inclure dans une page (X)HTML, de manière valide, du code qui ne sera lu et interprété que par Internet Explorer, ou par l'une ou l'autre de ses versions. Techniquement, il s'agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s'il doit interpréter le contenu du commentaire ou bien l'ignorer. Les commentaires conditionnels sont compris par Internet Explorer depuis la version 5.0 mais sont officiellement abandonnés à partir d'Internet Explorer 10. Syntaxe de base L'exemple le plus simple de commentaire conditionnel est le suivant: Rappel: un commentaire conditionnel ne peut être inséré que dans un document (X)HTML, et ne peut contenir que des instructions (X)HTML et non CSS. Exemple d'utilisation: Viser une version ou un éventail de versions Related:  Apprendre le HTML5WEB DESIGN

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 ?

La compression vidéo pour le web Pour une diffusion à partir des plateformes de partage de vidéos en ligne, vous devez convertir vos montages vidéo dans un format adapté à une diffusion sur Internet. Afin de rendre la plus efficace cette conversion, voici quelques conseils pour réussir une compression vidéo pour le web. Quelque soit votre support d’enregistrement, les fichiers obtenus après votre prise de vue seront lourds et disposeront d’un format d’enregistrement du type .mts, .mov ou mp4 qui ne sera pas forcément détectable par les services de partage en ligne de vidéo. Codec : H.264:Codec développé dans le cadre du MPEG, Le H.264 est également appelé également AVC (Advanced Video Coding). En haute définition, 2 formats coexistent 1280 pixels de largeur x 720 pixels de hauteur ou 1920×1080 pixels.Le format SD ou standard correspond à 640 pixels de large. On peut résumer un « bit » à un morceau de l’information traitée par un ordinateur. Vimeo Dailymotion Youtube Easyhtml5video

CSS3 PIE: CSS3 decorations for IE HTML5 : Éléments <figure> et <figcaption> L'élément <figure> ne devrait pas vous être inconnu puisque son rôle est pareil à celui qu'il joue dans les supports papiers tels que les livres ou magazines afin d'illustrer et de légender des photos, des diagrammes, ou encore des schémas. Illustration légendée Inaugurés avec HTML5, les éléments <figure> et <figcaption> fonctionnent de concert pour associer une légende à une illustration ou un autre élément média. <figure> <img src="image.jpg" alt="" /> <figcaption>Légende associée</figcaption></figure> Élément <figure> <figure> est une unité de contenu, c'est-à-dire que cet élément sert de conteneur dans lequel s'insèrent divers éléments comme des images, des schémas, des vidéos, des tableaux ou encore des blocs de code. Élément <figcaption> Enfant direct de <figure>, son rôle est de légender son parent, sous forme de texte et/ou de liens. Quelques applications dans le monde du livre Compatibilité navigateur des éléments <figure> et <figcaption> Applications sur le web Démonstration Une vidéo

Aide:Liste de caractères spéciaux Une page de Wikipédia, l'encyclopédie libre. L'ensemble de caractères pour HTML 4.01 est l'ISO 10646 Universal Character Set, qui est lié au jeu de caractères défini par Unicode. Les entités numériques décimales et hexadécimales des caractères sont le seul moyen universel de les entrer dans une page Wikipédia pour le moment. Noter qu'il est préférable de les écrire en décimal plutôt qu'en hexadécimal, vu que le support de l'hexadécimal par les navigateurs est plus récent. Elles seront néanmoins données ici en hexadécimal. Beaucoup de navigateurs sont seulement capables d'afficher un petit sous-ensemble du répertoire UCS complet. Les zones à usage privé ne contiennent pas les mêmes glyphes d'une police à l'autre et sont donc fortement déconseillés sur Wikipédia. Liste des caractères[modifier | modifier le code] Espaces fine et insécable[modifier | modifier le code] Alphabets[modifier | modifier le code] Caractères grecs[modifier | modifier le code] Caractères thaïs[modifier | modifier le code]

Afficher une icône favicon dans le navigateur Une favicon est une icône mise à disposition par un site Web pour enjoliver, en particulier dans les navigateurs Web, les endroits où ce site est mentionné. Cette icône pourra être utilisée dans la barre d'adresses ou de titre, les favoris (le terme est d'ailleurs un mot-valise né de la contraction de « favorites » et « icon »), les onglets, ou autres raccourcis. (source : Wikipedia) Pour avoir une favicon lisible par la plupart des navigateurs, il est préférable que cette image soit au format .ico. Il s'agit d'un format d'icône propriétaire de Windows, basé sur le BMP. Une fois votre fichier favicon.ico en ligne, il ne vous restera plus qu'à l'appeler depuis votre page. Les navigateurs modernes acceptent d'autres types de fichiers d'image comme le PNG qui est un format libre et compressé, mieux adapté au web. Il n'existe pas de type MIME officiel pour les fichiers .ico mais le type image/x-icon est très répandu et conforme au standard de formation des types MIME.

Keyframe Animation Syntax Basic Declaration & Usage For the sake of brevity the rest of the code on this page will not use any prefixes, but real world usage should use all the vendor prefixes from above Multiple steps If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values: Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate. Calling keyframe animation with separate properties Animation Shorthand Just space-separate all the individual values. animation: test 1s 2s 3 alternate backwards Combine transform and animation Multiple animations You can comma-separate the values to declare multiple animations on a selector. Steps() The steps() function controls exactly how many keyframes will render in the animation timeframe. If you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time. The math works out nicely there. Browser Support More Resources

Introduction à WAI ARIA (traduction) · Les intégristes Grégoire Dierendonck Cet article est destiné à des personnes ne connaissant pas ARIA. Vous devriez avoir une bonne connaissance du langage HTML et des problèmes que peuvent rencontrer les personnes handicapées sur le web. Après avoir lu cet article, vous comprendrez à quoi sert ARIA, comment l’intégrer à vos sites, et comment l’utiliser dès immédiatement et même sur le plus simple des sites pour le rendre plus accessible. Introduction Le langage HTML (HyperText Markup Language) n’a pas été conçu pour créer des applications web. Malheureusement, les techniques utilisées pour outrepasser ces limitations ne sont absolument pas accessibles. Les mises à jour sont souvent mal perçues par les personnes utilisant une technologie d’assistance. Petit historique du langage HTML Le langage HTML a été conçu pour être un système hypertexte, permettant de structurer et de partager des documents liés entre eux. Applications web Reproduction d’applications bureau Requêtes serveur en arrière plan Que suis-je ?

Timing des animations et des transitions en CSS3 L'arrivée de CSS3 il y a quelques années a pour plusieurs d'entre nous grandement révolutionné la manière dont nous intégrions un site Web. D'abord, ce furent les propriétés purement graphiques (coins arrondis, ombres portées) qui frayèrent leur chemin jusqu'en mode production. Ces propriétés étaient les mieux supportées des différents navigateurs, et elles étaient facilement imitables sur les plus anciens grâce aux outils à notre disposition (Par exemple: Css3Pie, Selectivizr, Modernizr, etc). Même la tâche redondante consistant à préfixer nos propriétés CSS3 est aujourd'hui facilitée avec Prefixr et PrefixFree. Aujourd'hui, l'étendue des possibilités auxquelles a accès un intégrateur est assez impressionnante. Et enfin, les propriétés de transition et d'animation sont plutôt bien supportées par l'ensemble des navigateurs modernes, y compris à partir d'Internet Explorer 10. Le sujet des transitions et des animations a déjà été traité par maints auteurs. Quelques Références Transitions:

22 Experimental WebGL Demo Examples WebGL is a web standard created to display 3D graphics in any platform that supports OpenGL. It makes use of the HTML5 Canvas element to generate graphics dynamically from script code, so there's no need to install plug-ins in the web browser. It includes some libraries that are currently in development, such as C3DL and WebGLU. This javascript API is managed by the consortium of nonprofit technology Khronos Group since early 2009 which together with the Mozilla Foundation created a workgroup in which they could experimentally develop prototypes and deployed applications using this technology. Currently the workgroup is also composed by Apple, Google and Opera, among others, and all these companies have implemented it in their latest versions of browsers like Apple Safari, Google Chrome, Mozilla Firefox and Opera.

Can I use... Support tables for HTML5, CSS3, etc CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. One of these design principles is the “Stay On Page” principle. This principle is based on the fact that page refreshes are disruptive to the user’s mental flow, causing what is known as “change blindness”, and that we need to be able to avoid breaking the visual flow of the user wherever and whenever we can. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. Technique #1: Absolutely positioned element

How To Build A CSS3 Sliding Menu It’s often best to put things away until you need them. Navigation menus are a good example. If I’m reading an article, I don’t want a large proportion of screen real estate taken with links — especially on a mobile device. In this article, we’re going to build a slide-out menu using CSS alone. View the CSS3 sliding menu demonstration… There are various solutions throughout the web, but I struggled to find one matching my requirements: It must use clean semantic HTML5 with no superfluous tags.It must not rely on JavaScript.It must not require additional graphics.It must work on mobile and tablet touch devices.It must degrade gracefully in older browsers (IE7+) or when specific CSS3 properties are not supported.It must look great! Open your favorite editor and let’s get coding… The HTML No surprises here — we have an HTML5 document, the IE shim, a link to our stylesheet, a nav element for the menu, and an article for our body text: CSS: Article Styles CSS: Navigation Styles CSS: The Animation

Related: