Tutoriels XHTML, CSS, actualités et articles sur les standards web

CSS Grid Layout arrive, préparez-vous ! – La Tête dans le Flux
▻https://blog.goetter.fr/2016/11/30/css-grid-layout-arrive-preparez-vous/comment-page-1/#comment-616

En résumé :
Grid Layout est un module de positionnement parfait pour construire ses templates et ses grilles, bref l’architecture globale de la page
Flexbox est parfait pour les composants qui constituent l’intérieur de nos gabarits : navigations, sliders, fiches produits, etc.

L’idée serait de pouvoir se passer de bootstrap pour gérer les grilles dans les pages HTML...

Voir aussi :
– comparatif de toutes les possibilités pour des grilles en CSS : float, inline-block, table-cell, columns, flexbox, grid ▻https://blog.goetter.fr/2014/10/27/le-point-sur-les-grilles-en-css

Grid layout :
– le positionnement par grid layout : ▻http://www.alsacreations.com/article/lire/1388-css3-grid-layout.html
– le site de référence pour grid layout, page des exemples : ►http://gridbyexample.com/examples
– des exemples avancés d’utilisation de grid layout : ▻https://blog.goetter.fr/2016/01/02/grid-layout-vers-la-grille-parfaite
– une sélection de références par le gourou d’Alsacréation : ▻https://www.alsacreations.com/astuce/lire/1739-CSS-Grid-Layout-les-ressources-indispensables-pour-apprendre.htm
– plein d’exemples de layout basés sur grid : ►https://gridbyexample.com/examples
– l’outil de développement de Firefox spécialisé pour l’inspection des grilles : ►https://www.mozilla.org/en-US/developer/css-grid

Flexbox :
– revue exhaustive des caractéristiques de flex : ▻https://chriswrightdesign.com/experiments/flexbox-adventures
– une présentation complète et progressive de flexbox : ▻https://la-cascade.io/flexbox-guide-complet
– exploration des possibilités de CSS flexbox (flex, flex-item, order...) : ►http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
– un générateur de code pour les propriétés flex : ▻http://the-echoplex.net/flexyboxes
– des exemples de grilles en flex : ►https://philipwalton.github.io/solved-by-flexbox

Et pour la norme :
– Flexible box : ▻https://www.w3.org/TR/css-flexbox-1
– Grid layout : ▻https://www.w3.org/TR/css-grid-1

#css, #flex, #flexbox, #grid, #grid_layout, #grille #bootstrap

Le format #json, #ajax et #jquery - Alsacreations
▻http://www.alsacreations.com/article/lire/1161-json-ajax-jquery-jsonp-getjson.html

Exemple (de base) d’utilisation de JSON avec #javascript et/ou jQuery

#tutoriel

A Practical Guide to SVGs on the web
▻https://svgontheweb.com

This page accompanies a talk given by Jake Giltsoff at Breaking Borders on the 16th of June 2015. It outlines some techniques you can use to prepare, implement, and work with SVGs on the web.

#svg

Une #grille responsive avec CSS3 #flexbox et LESS (ou Sass) - Alsacreations
▻http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html

Ce tutoriel a pour but de présenter dans les détails une technique de conception de grille de mise en forme responsive à l’aide du positionnement CSS3 Flexbox Layout, actuellement parfaitement adapté à ce genre de fonctions en attendant une meille... Tags : #grille #flexbox #CSS #web

Optimisation des pré-chargements avec #prefetch, #dns-prefetch et #prerender - Alsacreations
▻http://www.alsacreations.com/astuce/lire/1567-prefetch-prerender-dns-prefetch-link.html

Tags: #webdev dns #dns-prefetch prerender prefetch

Article très intéressant sur l’utilisation des em et pourquoi il ne faut plus en avoir peur :) ►http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html #webdesign

De l’inspiration pour du #design #mobile ▻http://www.alsacreations.com/astuce/lire/1640-o-trouver-de-linspiration-pour-du-design-mobile.html

La fonction calc() en CSS - Alsacreations
▻http://www.alsacreations.com/article/lire/1630-la-fonction-calc-en-css.html

Le navigateur peint la page, connaît l’interaction entre les éléments, calcule et interprête toutes les valeurs au sein de leur contexte, qu’il s’agisse de pixels, de pourcentages, de em, rem, pt, etc.

Concrètement, seul un navigateur est capable de savoir ce que donne l’expression « 100px + 2em ».

Aucune machine à calculer ni aucun préprocesseur ne peut exécuter ce calcul en amont avant que la page ne soit lue par le navigateur, car ils ne connaissent pas le contexte de rendu.

Bref, avec calc(), on laisse faire le navigateur faire son boulot, et c’est tant mieux.

#css #calcul

Une #vidéo d’arrière-plan sur toute la page en HTML et #CSS
▻http://www.alsacreations.com/tuto/lire/1620-une-video-arriere-plan-sur-toute-la-page.html

Tags : vidéo #HTML5 #fond #background CSS

Détecter le support des fonctionnalités avec @supports
▻http://www.alsacreations.com/article/lire/1617-detecter-support-fonctionnalites-avec-supports.html

http://www.alsacreations.com/xmedia/doc/small/Firefox_Transparent.png

La règle @supports, également nommée “règle conditionnelle”, permet de détecter la reconnaissance de certaines propriétés CSS au sein du navigateur.

Introduite au sein des spécifications dans le module des CSS conditionnelles, au même titre que les Media Queries, la règle @supports se rapproche de ce que peut nous offrir un outil tel que Modernizr, à savoir détecter le support ou non d’une fonctionnalité CSS chez votre visiteur afin de prévoir une alternative au besoin.

Compatibilité

Au statut de “Candidate recommendation”, @supports est actuellement compatible sur les navigateurs suivants, selon Can I Use :

Navigateurs Versions Détails

Firefox 22+ Firefox Mobile 28+

Supporté depuis Firefox 17 en activant une preference du navigateur (...)

Comprendre le #Viewport dans le Web mobile - Alsacreations
►http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de « fenêtre » réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile.

Comprendre la notion de viewport est absolument indispensable dans un projet d’intégration de site web pour tablettes et smartphones, ou dans un esprit d’adaptation « #Responsive Web Design ».

et - Alsacreations
▻http://www.alsacreations.com/article/lire/1416-html5-meter-progress.html

Tags : #meter #progress #HTML5 #champ #formulaire #todo:formation:HTML5

Embedding HTML5 video is still pretty hard | And then it crashed
▻http://blog.etianen.com/blog/2013/05/19/html5-video-is-hard

Now you can embed your video using the following code:

<!DOCTYPE html>
<html>
   <head>
       <script src="http :// api.html5media.info/1.1.5/html5media.min.js"></script>
   </head>
   <body>
       <video src="video.mp4" width=640 height=360 controls>
           <source src="video.mp4" media="only screen and (min-device-width: 568px)"></source>
           <source src="video-low.mp4" media="only screen and (max-device-width: 568px)"></source>
           <source src="video.webm"></source>
       </video>
   </body>
</html>

OMG! What a monster! But now everyone will be able to play your video!

(...)

I want to customize the player UI, and make it look consistent across all browsers!

Ahahahahahahahaha!

Ahahahaha!

No.

#video #html5

Introduction à la balise #video de #HTML5
►http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html

L’élément <video>, cousin de <audio> offre en HTML5 une solution simple, native pour les navigateurs pour l’intégration d’une vidéo dans une #page_web. Elle permet également de proposer une alternative à l’utilisation de #Flash pour les plate-formes ne le supportant pas (iOS par exemple avec iPhone, iPod, iPad...)

Plusieurs formats tiennent le devant de la scène : #WebM, #MP4 et #Ogg_Theora.

Comme on peut le constater, il y a une grande disparité dans le support des #codecs, chacun défendant ses intérêts pour le meilleur ou pour le pire (#commerciaux ou #libres).

Tout pour #partager simplement de la vidéo dans une page web autrement que par #Youtube ou assimilés.

Typographie web : gérer la taille du texte avec les « em » - Alsacreations
►http://www.alsacreations.com/article/lire/563-gerer-la-taille-du-texte-avec-les-em.html

Ce tutoriel présente l’unité em et la démarche à suivre pour l’utiliser à bon escient, ainsi que quelques conseils pour vous aider à assurer autant que possible la lisibilité du texte sur votre site

#em #typographie #texte #unité #css #font-size

Swiffy : convertir du Flash (SWF) en HTML5
▻http://www.alsacreations.com/astuce/lire/1556-flash-html5-swiffy.html

un outil en ligne de google pour convertir des fichiers SWF en HTML5
génère des fichiers un peu lourds mais fonctionne (à priori) correctement (interactions utilisateurs, liens...)

#flash #html5 #swiffy #google #en-ligne #web-based #convertisseur #javascript #outil

Voilà une petite astuce pour avoir des couleurs SPIPées avec de la transparence .

#SPIP génére des couleurs en HEX, de la forme #51f3d6 (enfin plutôt 51f3d6, le # disparaît dans les traitements)

Pour avoir des la transparence, il faut des couleurs en RGBa, du style rgba(0, 0, 255, 0.5).
▻http://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html

Pour cela, Il suffit de copier ce script dans mes_fonctions.php
▻http://bavotasan.com/2011/convert-hex-color-to-rgb-using-php

function hex2rgb($hex) {
$hex = str_replace("#", “”, $hex);

if(strlen($hex) == 3) {
$r = hexdec(substr($hex,0,1).substr($hex,0,1));
$g = hexdec(substr($hex,1,1).substr($hex,1,1));
$b = hexdec(substr($hex,2,1).substr($hex,2,1));
} else {
$r = hexdec(substr($hex,0,2));
$g = hexdec(substr($hex,2,2));
$b = hexdec(substr($hex,4,2));
}
$rgb = array($r, $g, $b);
return implode(",", $rgb); // returns the rgb values separated by commas
// return $rgb; // returns an array with the rgb values
}

(notez qu’il faut décommenter dans le script original la ligne return implode et commenter le return)

Ensuite, dans son squelette on peut faire ceci :

background-color: rgba([(#LOGO_RUBRIQUE||couleur_extraire|hex2rgb)],0.3);

Working around a lack of element queries | Filament Group, Inc., Boston, MA
▻http://filamentgroup.com/lab/element_query_workarounds

Lately, we’ve been running into a recurring dilemma when building #responsive_designs. We want to build responsive layouts comprised of many modular, independent HTML components that fluidly fill any layout container we drop them into, but CSS3 #media_queries don’t currently offer a way to make content respond to its container’s dimensions (as opposed to the overall viewport size).

FitVids.JS - A lightweight, easy-to-use #jquery plugin for fluid width video embeds.
▻http://fitvidsjs.com

Un script qui utilise la technique suivante pour les embeds (qui devrait intéresser @kent1) : ‎ Koblentz entoure son #iframe d’un conteneur auquel il va donner une classe pour lui appliquer ensuite du CSS. Ce conteneur permet d’avoir un iframe fluid, même si les valeurs de largeur et hauteur sont données en pixels et en dur dans le HTML.

Repéré sur : ▻http://www.alsacreations.com/article/lire/1559-#responsive-web-design-present-futur-adaptation-mobile.html

#embed #videos

#CSS 3 #Flexbox Layout module
►http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html

Un article récent (mars 2013) sur le nouveau modèle de boite Flexbox qui arrive, présentant la syntaxe finale. Ce module intègre entre autre le principe des grilles CSS des frameworks directement dans le noyau de base. Avec alignement vertical et horizontal à l’intérieur du parent.

L’autre point génial : définir explicitement l’ordre visuel des boites, sans changer l’ordre du code HTML. Un peu comme dans #Layout-Gala cette fois, mais là aussi directement dans le noyau, avec des règles toutes simples.

#intégration #web #framework #grille