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 etc

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 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

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.

CSS Tutorial 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 (!

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

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.

HTML Tutorial 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

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.

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.