Alsacréations : Actualités et tutoriels HTML, HTML5, CSS, CSS3, standards du web
Le contexte de formatage block en CSS
Certaines spécifications CSS sont plus obscures que d'autres. Mais il est du devoir d'un intégrateur de les connaître pour être plus efficace dans son métier. Qui n'a jamais pesté contre des éléments flottants qui ne se comportent pas comme espéré ? Ces comportements, comme d'autres, sont décrits et expliqués au sein d'une spécification concernant le “Visual Formatting Model”, qui décrit globalement le concept de flux d’affichage, de boîtes et de modes de rendu visuel. Voyons comment déchiffrer cette ressource cruciale… Block et Inline sont sur un bateau (qui float) Pour commencer, la spécification chamboule nos croyances établies et nous apprend à distinguer les blocks… des blocks. Si vous pensiez qu’un élément block est simplement un élément qui possède la règle display: block, eh bien en fait, non, c’est un peu plus subtil que ça Mais c’est quoi un “contexte de formatage block” ? Des sortes de “super éléments” ? Démonstrations en image… 1- Débordement de flottants : 3- Fusion de marges :
Comment insérer des vidéos Youtube HTML5 sur votre site ?
Lorsqu'on insère une vidéo Youtube dans une page web, on se retrouve avec un super player flash et notre vidéo en FLV qui se joue dedans. Impecc... Pour faire ça, il suffit simplement de copier coller le code qui se trouve sous la vidéo youtube. Ce qui donne un truc comme ça : Bon, ça on le savait tous. Mais comment faire pour insérer une vidéo Youtube qui soit affichée en HTML5 (avec la balise vidéo) ou en flash selon le navigateur de vos visiteurs ? Si je prend par exemple l'url de la dernière bande annonce de TRON, voici ce que j'obtiens : J'adapte un peu l'url pour avoir ceci : C'est à dire pour avoir le player directement, qui sera soit du HTML5 si votre navigateur le supporte, soit du flash si votre browser est à la masse ;-) Ensuite, un petit coup de iFrame magique comme ceci : EDIT : Sur les conseils de Diti, j'ai testé avec une balise object et ça à l'air de le faire un peu plus dans les normes. [Source et photo]
.mouseleave
Description: Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element. This method is a shortcut for .on('mouseleave', handler) in the first two variations, and .trigger('mouseleave') in the third. The mouseleave JavaScript event is proprietary to Internet Explorer. Because of the event's general utility, jQuery simulates this event so that it can be used regardless of browser. This event is sent to an element when the mouse pointer leaves the element. For example, consider the HTML: The event handler can be bound to any element: Now when the mouse pointer moves out of the Outer <div>, the message is appended to <div id="log">. After this code executes, clicks on Trigger the handler will also append the message. The mouseleave event differs from mouseout in the way it handles event bubbling. Demo:
Node.js : mais à quoi ça sert ?
Si Node.js est rapide, cela tient principalement à deux choses : le moteur V8 et son fonctionnement non bloquant. Le moteur V8 Node.js utilise le moteur d'exécution ultrarapide V8 de Google Chrome. Ce moteur V8 avait fait beaucoup parler de lui à la sortie de Google Chrome, car c'est un outil open source créé par Google qui analyse et exécute du code JavaScript très rapidement. Jusqu'à la sortie de Chrome, la plupart des navigateurs lisaient le code JavaScript de façon peu efficace : le code était lu et interprété au fur et à mesure. Le moteur V8 de Google Chrome, qui est réutilisé ici par Node.js, fonctionne complètement différent. Vous n'avez pas besoin de connaître le fonctionnement de V8 pour utiliser Node.js. Le modèle non bloquant Comme JavaScript est un langage conçu autour de la notion d'évènement, Node.js a pu mettre en place une architecture de code entièrement non bloquante. Mais au fait, connaissez-vous la différence entre un code bloquant et un code non bloquant ? Mais...
The Ultimate CSS Grid Tutorial
You are probably already familiar with the CSS box model, so let’s begin this tutorial with a similar bird’s eye view representation of CSS Grid. All diagrams were taken from my CSS Visual Dictionary book. You can get it here bundled together with JavaScript Grammar. Or you can just follow me on Twitter where I share more of my tutorials. In this case there are 3 <div> items. Notice that lines can also be counted backwards using the negative coordinate system. The grid above is 5 by 4 cells in dimension. Number of rows and columns is assumed implicitly by number of values set. In between each cell there is a line and an optional gap. Rows and columns between the lines are referred to as the grid’s tracks. There are always [cell + 1] lines per dimension. Therefore 5 columns will have 6 lines whereas 4 rows will have 5 lines. In the following example there are 7 columns and only 1 row: The CSS grid is bi-directional. It works kind of like Flex: Think about the grid in this abstract way: Use Cases 1.
