HTML5 This specification defines the 5th major version, second minor revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features continue to be introduced to help Web application authors, new elements continue to be introduced based on research into prevailing authoring practices, and special attention continues to be given to defining clear conformance criteria for user agents in an effort to improve interoperability. This section describes the status of this document at the time of its publication. This document was published by the Web Platform Working Group as a W3C Recommendation for HTML 5.2 that would obsolete the HTML 5.1 Recommendation. All interested parties are invited to provide implementation and bug reports and other comments through the Working Group's Issue tracker. The implementation report produced for this version demonstrates that in almost every case changes are matched by interoperable implementation.
CSS3 Image Styles – Part 2 Previously I wrote two tutorials on how to style the image element with CSS3 inset box-shadow and border-radius. The trick is to wrap the image with a span tag and apply the image as background-image. However, I recently ran into a problem with that trick while designing the PhotoTouch theme. The issue is that the background-image is not resizable and thus it is not a good idea to use in responsive design. Fortunately, I found a workaround to resolve this. So today I'm going to revisit this topic again. View Demo Image Styles Problem Most browsers don't render the border-radius and inset box-shadow perfectly on the image element. Previous Solution (see previous demo) As I posted before, you can work around by applying the actual image as background-image. Problem With Background-Image Now the problem with using the background-image trick is that the image can not be resized dynamically. New Solution!! Then later I found another workaround using a similar trick. Dynamic jQuery Output
CSS Tutorial Exercice d'intégration Html/Css n°2 - Copier coller Un deuxième petit exercice d’intégration, pour une pag type blog, à partir d’un, voici le rendu final: le PSD Comme on le voit la page est découpée en plusieurs lignes, on peut imaginer une grille derrière la page : ici je vais utiliser html5 Boiler, qui utilise 960 grid gs pour découper et organiser la page.Une police particulière pour le titre, un texte d’introduction, un bloc d’ images à la une, trois blocs de rubriques, puis encore trois blocs d’info. Voici le code Ici l’import de la police n’est pa possible donc le titre est mal positionné, si vous répliquez le code, pensez à importer aussi la police.
The Basics of CSS3 Last week I posted a CSS3 dropdown menu and someone complained that I didn't explain the CSS code in detail. Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know. The first three values are RGB color values and the last value is the level of the transparency (0 = transparent and 1 = opaque). RBGA can be applied to any properties associated with color such as font color, border color, background color, shadow color, etc. Text Shadow Text shadow is structured in the following order: x-offset, y-offset, blur, and color; Set a negative value for x-offset to shift the shadow to the left. You can also specify a list of text-shadow (separated by a comma). text-shadow: 0 1px 0 #fff, 0 -1px 0 #000; Border Radius The shorthand for border radius is similar to the padding and margin property (eg. border-radius: 20px). You can specify each corner with a different value. Box Shadow
HTML Tutorial Target=”_blank” — the most underestimated vulnerability ever People using target='_blank' links usually have no idea about this curious fact: The page we're linking to gains partial access to the linking page via the window.opener object. The newly opened tab can, say, change the window.opener.location to some phishing page. Or execute some JavaScript on the opener-page on your behalf... Users trust the page that is already opened, they won't get suspicious. Example attack: create a fake "viral" page with cute cat pictures, jokes or whatever, get it shared on Facebook (which is known for opening links via _blank) and every time someone clicks the link - execute window.opener.location = ' …redirecting to a page that asks the user to re-enter her Facebook password. Add this to your outgoing links. rel="noopener" Update: FF does not support "noopener" so add this. rel="noopener noreferrer" var newWnd = window.open(); newWnd.opener = null; PS.
Dropdown Menus for Mobile - Astuteo™ Side Projects Dropdown menus powered by Suckerfish, Superfish, and the like have been widely adopted across the web. While effective in larger hover-enabled & mouse-driven formats, they prove problematic within the limited real estate of a mobile viewport. Intended for responsive retrofits, this stylesheet will grab that cumbersome dropdown menu and position it atop the viewport in an unobtrusive and usable way. Targets unordered list dropdowns Powered by CSS media queries and a little jQuery Single base color for easy color adjustment Works two levels deep Integrates nicely with Superfish dropdowns The Mobile Dropdown Conversion was created by Matt Everson of Astuteo – that’s me – and it’s entirely free for you to download and use, modify for your own applications, or otherwise make millions off of.
How Do I Make a Full Table Row Clickable? Update 7/28/2010: I just wrote a new version of this article using jQuery. You can find the new article here. It's a common scenario to display an HTML table with items, like products, employees and so on, and then link each item to a detail page where you can display the full details of this item. The link is often represented by a button or text link in one of the columns. But to make it easier for your users to select a specific item, you could make the full row clickable. Often when people try to implement this behavior, they try to add an HTML link to each table cell, like this: <table><tr><td><a href="Details.asp">John</a></td><td><a href="Details.asp">Doe</a></td></tr></table> The disadvantage of this method is that not the entire table cell is linked, but just the text in that cell. To make the full row selectable, you should add the link to the <tr> instead of to individual table cells. <! On each <tr> element I have added the onclick attribute that calls the DoNav method.
HTML5 : structure globale du document Pour débuter sereinement avec une nouvelle intégration HTML5 et comprendre ses implications, nous allons commencer par le début : la structure globale d'un document. La conception d'une page web en suivant la philosophie du standard HTML5 spécifié par le W3C (ou du standard vivant tel que désigné par le WhatWG) répond à quelques réflexes de base. La structure d'un document (l'imbrication des balises à la racine) est simplfiiée pour répondre aux attentes pragmatiques des intégrateurs et webdesigners. Un document HTML5 minimal Sans surprise, les bases d'un code HTML5 ressemblent beaucoup à celles rédigées à l'aide des précédentes versions HTML 4 et XHTML 1.x. <! Le doctype La première ligne d'en-tête a été considérablement simplifiée. Ce doctype allégé a été mûrement testé et réfléchi : il permet toujours - pour les anciens navigateurs - de rester dans le mode d'interprétation conforme aux standards et d'éviter le mode quirks. L'élément racine <html> L'attribut lang (sur <html>) Initializr
Expandable Mobile Search Form Previously I wrote a tutorial on mobile navigation, today I'm going to share a CSS tutorial on how to make an expandable search form that is suitable for mobile and responsive designs. This trick uses native CSS properties — no Javascript or extra markups required. It is a simple and effective way to design a compact search form. View Demo Search Form The Purpose On mobile display, every pixel counts. On Best Web Gallery, I use jQuery to fade in the search form when the search button is clicked. Let's Start: The HTML Code Below is the sample HTML form. Reseting The Default Webkit Search Input By default, Webkit browsers style the search input like the screenshot shown below: To remove the default style so it looks like a regular text field, add the following CSS: Styling The Search Input (view demo) I'm not going to go through each CSS line because it is straight forward. If you need help on the border-radius or box-shadow CSS3 properties, read the "The Basics of CSS3" article.
Whatever:hover Hi there! This script is from 2003, and targets a flaw in IE6, which at its peak was a really popuplar browser. Today (oct 2011) it no longer is, and as such this script should not really be necessary anymore. Please try to convice your client, project manager or boss, that not every browser needs to display a website the exact same way; it is the content that matters. This page (and script) will stay here for old times' sake. updated: november 15, 2009 (changes) Whatever:hover 3.11 Most modern browsers support the :hover selector for any html element. Whatever:hover is a small script that automatically patches :hover, :active and :focus for IE6, IE7 and IE8 quirks, letting you use them like you would in any other browser. If you're already familiar with whatever:hover and just want to download it, scroll down and grab the latest version. Getting it to work How do I use it? Link whatever:hover to the body element, and you're all set. IE only behaviours How does it work? #menu li { ... }
Passer du HTML au XHTML Introduction Depuis le 26 janvier 2000, le XHTML est la nouvelle norme du W3C en matière de langage balisé pour concevoir des documents Web. Que vos pages existantes soient actuellement conformes ou non aux différentes versions du HTML importe peu. Vous allez rapidement constater que les convertir en XHTML n'est pas sorcier du tout. Tout ce qui vous sépare de votre but, c'est un peu moins d'une dizaine de petites lois et quelques principes d'application. Cet article n'a qu'un seul but, celui de vous aider à franchir ce pas entre le HTML du siècle dernier et celui d'aujourd'hui ou, si vous préférez, à mettre un peu de X dans votre HTML. Chaque balise nécessite une fermeture Dans les premières heures du HTML, on pouvait se permettre d'être relativement brouillon dans la façon d'organiser son code. Invalide : <p>Lorem ipsum dolor sit amet. Valide : <p>Lorem ipsum dolor sit amet. Même celles qui n'en ont pas Incorrect : Correct : Imbriquer correctement les éléments <h1 name="titre">…</h1> <? <! <? <!
Mobile Navigation Design & Tutorial One of the common challenges when designing responsive design for mobile is the navigation menu. If the site has many sections or pages, it gets challenging to squeeze all the items into a small mobile resolution. The navigation most likely ends up running into multiple lines or the buttons stacking on top each other. So I'm going to review some of the design solution and provide a quick tutorial on how to create a mobile navigation with jQuery. View Demo Mobile Nav Problem The screenshots below show the navigation layout issues on mobile. Solutions 1) Dropdown One of the commonly used solution is to convert the navigation into a select dropdown. 2) Display as Block Another quick fix is set each menu item as block elements so they display vertically. 3) Menu Icon The last solution that I'm going to review is to use a menu icon/button to toggle the navigation. Mobile Navigation with jQuery (view demo) Below is the sample navigation HTML used in this tutorial: jQuery Code Final Demo Update: