CSS - Conditional comments

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

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.

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

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 { ... }

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.

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.

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:

An Exhaustive Guide on Creating Responsive Website Using HTML5 & CSS3 Over the recent years, it has been observed that people are preferring mobile phones over desktop computers for browsing the Internet. Building a website that looks perfect and functions appropriately on multiple hand-held gadgets has become the most-trusted method of gaining an edge over your competitors. It is responsive design which plays a vital role in creation of sites that can be accessed smoothly on a variety of devices with different screen sizes and resolutions. HTML5 and CSS3 have emerged as two of the most applauded web technologies for creating responsive designs that can easily adapt to contemporary mobile browsers and devices. Creating a basic Responsive Website skeleton using HTML5 and CSS3 Well, there are two methods of creating a responsive design. Method No.1- Using your own coding technique As the very first method, you can create a responsive design using your own code as shown below: .col { float: left; margin: 1%; width: 23%; min-height: 50px; background: #F0F0F0; .col {

Responsive Design with CSS3 Media Queries Screen resolution nowsaday ranges from 320px (iPhone) to 2560px (large monitor) or even higher. Users no longer just browse the web with desktop computers. Users now use mobile phones, small notebooks, tablet devices such as iPad or Playbook to access the web. View Demo Responsive Design Download Demo ZIP See It in Action First Before you start, check the final demo to see how it looks like. More Examples If you want to see more examples, check out the following WordPress themes that I designed with media queries: Tisa, Elemin, Suco, iTheme2, Funki, Minblr, and Wumblr. Overview The page's container has a width of 980px which is optimized for any resolution wider than 1024px. HTML Code I'm not going to go through the details of the HTML code. HTML5.js Note that I use HTML5 markup in my demo. Reset HTML5 Elements to Block The following CSS will reset the HTML5 elements (article, aside, figure, header, footer, etc.) to block element. Main Structure CSS Again, I'm not going to get into the details.