Ajax. Templates. Openweb.eu.org - Compatibilité multi-navigateurs des polices de caractères. Quelles sont les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web ? Aurélien Levy a mené une campagne de tests pour donner une réponse à ce problème récurrent pour les développeurs de sites web. Quelles unités ? Les tailles de polices peuvent être exprimées à l’aide d’unités relatives ou absolues. Sont disponibles, entre autres, pour les unités relatives : les mots clefs ; les em ; les % ;les px (pixels) ; Et pour les unités absolues : le pt (point) ; le pc (pica) ; le cm (centimètre) ;le mm (millimètre) ; le in (inche) ; Dans un premier temps, faisons le tri sur les unités à utiliser. D’autre part, les unités absolues sont déconseillées pour des raisons liées à l’accessibilité des contenus Web.
L’utilisation d’unités relatives pour les tailles de caractères permet aux utilisateurs d’adapter l’affichage de la page selon leur besoin. Les avantages : Les inconvénients : Les ems ou les % Résultats. Displaying percentages. In Amigo we’ve got percentage bars! This was the image that Jason came up with: In turning this part of the design into something flexible on the website I saw two options; clever CSS, or ‘Lots of Images’. I decided that ‘Lots of Images’ was a bad idea: If they were generated in PHP you’ve got that extra overhead For each percentage bar you’d need to download another image - extra bandwidth & slower for the user Could get difficult for a designer to update (and, it’s an image after all) … so clever CSS it is. The Code Okay, it’s not really that clever, it’s CSS not rocket science. Img.percentImage { background: white url(/images/percentImage_back.png) top left no-repeat; padding: 0; margin: 5px 0 0 0; background-position: 1px 0; If you understand XHTML/CSS, you’ll see there’s two images involved.
The second image is the bar’s color, split into two halves. What’s it doing The inline style handles what pecentage we want to display in the box by changing the position of the background-image. 1f84. CSS: Unordered List Calendar. Simple, accessible external links. Date: 11 December 2005 Author: Russ Weakley The scenario The Web Content Accessibility Guidelines 1.0 state: “Clearly identify the target of each link. [Priority 2] Link text (The rendered text content of a link) should be meaningful enough to make sense when read out of context — either on its own or as part of a sequence of links.
Link text should also be terse.” Depending on how this checkpoint is read, this could mean that every external link should be identified within the link text itself. The problem Is there a way to add descriptive text to all external links and then replace this text with a small icon for CSS supporting browsers? The solution 1. <a class="external" href="#">sed diam nonummy</a> 2. <a class="external" href="#">sed diam nonummy (external link)</a> 3. <a class="external" href="#">sed diam nonummy<span> (external link)</span></a> 4. 5. 6. 7. 8. 9.
Example without CSS applied Example with CSS applied Note: What do you think? Translation. 15 CSS Properties You Probably Never Use (but perhaps should) The author's posts are entirely his or her own (excluding the unlikely event of hypnosis) and may not always reflect the views of Moz. After writing 5 HTML Elements You Probably Never Use (but perhaps should), I thought creating something similar for CSS was in order. These are all CSS level 2 properties but some of them don't work in all browsers, so make sure and test things out before putting them into use. 1. clipclip: rect(5px, 40px, 45px, 5px) From iBloom Studios A good way to visualize the clip attribute is if you take a piece of paper with a rectangle cut out of it and place it on top of a photo (just like using a Photoshop layer mask).
The area of the rectangular hole, allowing the layer behind it to show through, is what the clip property will specify. They've got a lengthy article all about clip and some examples of it in use. 2. From Macromedia 3. text-shadowtext-shadow: color, x-coordinate, y-coordinate, blur radiustext-shadow: #000000 10px -5px 1px From Quirksmode: Live Design. HTML’s a Tag Too. Exploring Footers. One of the nice things about old-school table layout methods is that they enable you to create liquid page designs very easily. If you want to center content vertically or stick a footer to the bottom of the browser window, all you have to do is include one main table with a height of 100% and position elements inside of it.
With web standards, you can’t do this anymore. The table height property is deprecated in XHTML, and web standards recommend that you avoid using tables for page layout. To divide structural markup from presentation, CSS is the way to go — but if you want to use CSS for vertical positioning, you face a lack of support from some mainstream browsers. This article explores the ways you can position footers using web standards, although the same techniques may be used to vertically position other elements. Many designs contain a footer that is positioned directly under the content area, unless the content and the footer together don’t fill the window entirely. Current style in web design. In this article I try to sum up the current state-of-the-art in graphic design for web pages (late 2006, but still highly relevant today), and identify the distinctive features that make a modern web page look fresh, appealing and easy to use.
The key feature of modern web design is simplicity. To learn how to apply simple web design to your own sites, you need to read “Save the Pixel – The Art of Simple Web Design”, which takes you through a full set of simple design tools, illustrated with 22 before & after redesigns. I’m glad to say that web design is better today than ever – and it’s continuing to improve. That’s not just because there are more web sites out there, so more good stuff to look at. There’s still an awful lot of crud too. I just think that more web designers know more about how to design than ever before.
The examples below (which I’ll roll over time) show excellent modern graphic design technique. Hotties Common features Let’s look at these features one by one. Simple layout. CSS Shorthand Guide. Sunday Oct 23 2005 Ok. Let's set the record straight. There is no official guide for each and every CSS shorthand property value. So let's work together and put one together shall we? Background Backgrounds can be tricky. Background properties Believe it or not, all these properties can be combined into one single background property as follows: the background shorthand property The Unknown Often times developers find themselves wondering What if I leave out this value or that one?
Default background property values Lesson learned: be careful on what you don't declare. Background shorthand example (unexplicit) This would be the same as declaring the following values: background shorthand example (explicit) Font Font is perhaps the trickiest. Font properties The default values for the font shorthand property are as follows: default font property values And of course without any further ado. The font shorthand property Here is where it gets tricky. Or and . Strong element styled with font Border Outline. Create a simple liquid layout.
Net magazine is the number one choice for the professional web designer and developer. It’s here that you find out about the latest new web trends, technologies and techniques – all in one handy package. Each issue boasts a wealth of expert tips and advice, including in-depth features and over 30 pages of advanced front- and backend tutorials on subjects as diverse as CSS, HTML, JavaScript, WordPress, PHP, and plenty more. net compiles the hottest new sites from around the web, and being the voice of web design, our mission is to source the best articles written by the best people in the industry and feature interviews and opinions crammed with inspiration and creative advice.
In short, If you're serious about web design and development, then net is the magazine for you. Editorial Advertising.