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:  TUTORIELS, 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

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

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.

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

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?

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.

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

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.

MySQL for Absolute Beginners Tutorial by Matt Doyle | Level: Beginner | Published on 25 August 2011 Categories: Never used MySQL before? Start here! This tutorial walks you through the very basics of MySQL and SQL databases. Learn how to install MySQL, how to issue commands, and how to create and use databases. A database is an essential part of most websites and blogs, but setting up and using a database can be a daunting task for the beginner web developer. In this tutorial you'll learn — in simple terms — how to install, set up, and use a MySQL database on your computer. You'll explore the following areas in this tutorial: The concept of a database, and why databases are useful The advantages of using MySQL to manage your databases How to install MySQL on your computer Using the MySQL Monitor program to send commands to your MySQL server How to create a database and table SQL (Structured Query Language), and what it's used for Adding records to a table, and retrieving records from a table What is a database? database

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

Related: