background preloader

CSS - Conditional comments

CSS - Conditional comments
Page last changed today Conditional comments only work in IE, and are thus excellently suited to give special instructions meant only for IE. They are supported from IE 5 up until IE9 (inclusive). Older IE versions frequently need some extra CSS in order to show your pages right. Conditional comments are the best way to add this CSS, since the system is explicitly designed for this use case. If you need special styles for IE10 or up you’ll have to find another method, since conditional comments were disabled in IE10. Conditional comments work as follows: <! Their basic structure is the same as an HTML comment (<! Below I added a lot of conditional comments that print out messages according to your IE version. Note that conditional comments were removed from IE10, so IE10 and up will not understand the test. Below are a few conditional comments that reveal the IE version you're using. According to the conditional comment this is not IE 5-9 The syntax I use is: <p class="accent"><! <! This is IE. Related:  FallbackTUTORIELS, COURS, FORMATIONS etcPARADES pour IE

Script Junkie | Respond to Different Devices With CSS3 Media Queries As a hater of horizontal scrollbars, I’ve always been intrigued by layout design that resizes with browser windows. And as a lover of usability and accessibility, I have a keen interest in layouts that resize with text resizing. So when fluid/liquid and elastic design became the trendy web topics in the mid 2000s, I experimented alongside every other bandwagon jumper. What I discovered was 1) I still suck terribly at math 2) the lazy designer in me much prefers the “known” parameters of fixed design and 3) while both elastic and fluid design were heading in the right direction, they had their limitations: Without setting max-width (which isn’t supported in < IE7) values, line-lengths can become unreadable in fluid layouts.Elastic designs don’t resize unless text is resized. Using both fluid and elastic together was an acceptable compromise, but the design “flexibility” was limited to size … font size, image size and layout size. A Device Deluge Responsive Design With Media Queries Testing

Detect my Browser :: Browser, Browser Plugin, HTML5 and CSS3 detection 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.

DD_belatedPNG: Medicine for your IE6/PNG headache! 2011/4/8: This is no longer an actively maintained project. I apologize, I must move on with current events. This is a Javascript library that sandwiches PNG image support into IE6 without much fuss. You can use PNGs as the SRC of an <IMG/> element or as a background-image property in CSS. If you attempt the latter, you will find that, unlike with vanilla usage of AlphaImageLoader, background-position and background-repeat work as intended. As a bonus, "fixed" elements will respond to a commonly used set of Javascript style assignments, as well as the A:hover pseudo-class. Table of Contents Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript file - please do not hotlink mine, I am on a shared host. Due to popular demand, here is some documentation for how to "fix" elements on a pick-and-choose basis. (Based on the normal usage approach)

ASCIIMathML: Math on the web for everyone Would you or your students like to easily produce good-looking math formulas on webpages using a simple calculator-style syntax and your own ASCII or HTML editor? Here is a free multi-platform solution (and if you prefer it, LaTeX-style formulas also work). Now even easier to use: just add one line to your HTML file to load ASCIIMathML.js ASCIIMathML.js is mentioned on the MathML page of the World Wide Web Consortium , also on The Math Forum. New: MathJax 2.0 has been released and now comes with an ASCIIMath input jax ! This is the main page (HTML version) for the ASCIIMathML.js script which allows incorporating mathematical formulas on webpages with a minimum of fuss (just add one line to a webpage to load the script). This page requires Internet Explorer 6 + MathPlayer or Firefox/Mozilla/Netscape. ASCIIMathML.js is freely available under the GNU Lesser General Public License . Let's test the ASCIIMathML.js translator on a simple example. Example: Solving the quadratic equation.

A Complete Guide to SVG Fallbacks The following is a guest post by Amelia Bellamy-Royds and me. Amelia and I recently presented at the same conference together. We both covered SVG, yet neither of us SVG fallbacks comprehensively. It's such a huge topic, after all. While I've covered SVG fallbacks before, it's been a few years and we figured we could do that subject better justice now. Intro to SVG Fallbacks Here at CSS-Tricks, there's a lot of information telling you how wonderful SVG is. Maybe they are stuck on an office computer that hasn't been updated since the IT guy quit six years ago, maybe they're using a second-hand refurbished phone they can't afford to upgrade, or maybe they just don't understand or don't care about updating to a new browser. Some tech-oriented web sites (like this one) can afford to say that they only support modern web browsers. What KIND of fallback do you need? No fallback. On the interactive front, your options are limited. Fallback for SVG as <img> SVG can be used like this: if (! if (!

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.

How to make IE6 display transparent PNGs correctly Transparent PNGs can be a very helpful tool in any web designers tookit, for example we use them on the front page of this site to create the links to read the sample chapter or buy the book. Unfortunately, Internet Explorer 6 did not support transparent PNGs, and they end up having a greyish background. Because some of the visitors to your site will probably still be using IE6, this article teaches you a handy JavaScript technique you can use to enable transparent PNGs to show up correctly. The Background IE6 was originally released back in 2001 but it took five years before Microsoft released IE7 in late 2006. Although some sites are discontinuing support for IE6, you (or your client) may need your site to work in older browsers, so this technique can be helpful to know. There are several different JavaScripts available on the web to get around this problem, although the one I will describe on this page is called dd_belated , and was written by Drew Diller. The Solution How It Works <!

Horizontal Centering - CSS Tutorials Centering Absolutely Positioned Elements With Unknown Width Time to put your seatbelts back on, IE's expanding shrink wrap bug is here to hunt us again. Example 6 LoremIpsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum! Lorem Ipsum! HTML Code <div id="container"><div class="outer"><div class="inner"><p> LoremIpsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum<br><img src="smiley.png" alt="Lorem Ipsum" width="35" height="35"></p></div></div><div class="outer2"><div class="inner"><p> Lorem Ipsum! CSS code condcom code First of all it's important to understand the difference on how left and right properties affect absolutely and relatively positioned elements. So what problem does it create to us?

HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki The No-Nonsense Guide to HTML5 Fallbacks So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Looking to conditionally load these scripts (client-side), based on feature detects? svgweb by Brad Neuberg & others Fallback via FlashSnap.SVG from scratch by the author of Raphaël (Dmitry Baranovskiy) Abstracted API. FakeSmile by David Leunen Canvas FlashCanvas by Shinya Muramatsu Reported to have 33x better performance than excanvasexcanvas by Google, Erik Arvidssonslcanvas project (Original Silverlight bridge)canvas-textOnly necessary for canvastext in IE, reallyfxCanvasKinetic.js by Eric Drowell Web Storage (LocalStorage and SessionStorage) Non HTML5 API Solutions Sectioning Elements Video VTT: Video Timed Track (subtitles) Audio Audio Data API Ruby

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 =; newWnd.opener = null; PS.

IE PNG Fix - TwinHelix This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! Full CSS background positioning and repeat are supporting (including CSS sprites). It requires only one line in your CSS file, and no changes to your website HTML. <IMG> tags and background images are both supported. Script License Agreement IE5.5+ PNG Alpha Fix (c) 2004-2009 Angus Turnbull This is licensed under the GNU LGPL, version 2.1 or later. Download If you want, you can view an online demonstration. To download permanently: (40kb). More downloads are available at the Git repository. Donations Appreciated! Compatibility This uses CSS "behaviors", a custom Microsoft extension to CSS. Archived Versions Are you looking for a design focused web company with high quality standards? v1.0 Suggested links

Normalizing Your CSS to Gain Total Control Over your Styles NOTE: This is a bit of a mental health warning for web design beginners and could save you some time and some unnecessary wrinkles when you’re starting to code your own web pages. When I first began coding websites using HTML and CSS, I remember running into endless problems with the way my CSS styles would render in web browsers. Countless hours were wasted while I tried to get to the bottom of why my header was 40 pixels wider than I wanted it to be, or why I always got that annoying dashed line around my links when I clicked on them. Grrrr! Admittedly, I had no idea what I was doing back then and I was going through the extremely painful process of teaching myself web design whilst actually running a web design business. Back in the Day Nowadays, we have the advantage of the excellent Google Chrome browser, along with other good, quick and reliable browsers such as Firefox, Safari and Opera. The Revolution inShare3

Amélioration progressive : Modernizr et sélecteurs CSS avancés A l'inverse du concept de dégradation gracieuse, le principe d’amélioration progressive ("progressive enhancement" en anglais) est une stratégie de conception web en couches successives, qui permet à chacun d’accéder au contenu et aux fonctionnalités de base d’une page web en utilisant n’importe quel navigateur, tout en offrant une version améliorée aux utilisateurs disposant de navigateurs plus récents ou plus évolués. En pratique et dans le domaine des styles CSS, cela se traduit par une mise en forme initiale commune à l'ensemble des logiciels de navigation, puis un "bonus" pour agrémenter ceux qui ne supportent pas encore CSS3 ou mal CSS2.1. Cela permet d’opter occasionnellement pour une technologie récente telle que CSS3 pour certaines décorations d’éléments de page (coins arrondis, ombrages, semi-transparence, transitions progressives…) qui pourraient consister en des « bonus » mérités pour les navigateurs récents. Modernizr : le bazooka JavaScript :root pour IE9 et supérieurs