CSS Hacks Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it's best to know what your options are and weigh the consequences appropriately. The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences. In-CSS hacks Up One of the drawbacks of conditional comments is that they require changes to the HTML source. Easy selectors Most in-CSS hacks deal with selector bugs. IE 6 and below * html {} IE 7 and below *:first-child+html {} * html {} IE 7 only *:first-child+html {} IE 7 and modern browsers only html>body {} Modern browsers only (not IE 7) Recent Opera versions 9 and below
google-styleguide.googlecode.com/svn/trunk/xmlstyle.html Version 1.0Copyright Google 2008 Introduction This document provides a set of guidelines for general use when designing new XML document formats (and to some extent XML documents as well; see Section 11). These guidelines apply to new designs, and are not intended to force retroactive changes in existing designs. This guide is meant for the design of XML that is to be generated and consumed by machines rather than human beings. Brief rationales have been added to most of the guidelines. The terms MUST, MUST NOT, SHOULD, SHOULD NOT, and MAY are used in this document in the sense of RFC 2119. 1. Attempt to reuse existing XML formats whenever possible, especially those which allow extensions. 2. Document formats SHOULD be expressed using a schema language. 3. Element names MUST be in a namespace, except when extending pre-existing document types that do not use namespaces. 4. Note: "Names" refers to the names of elements, attributes, and enumerated values.All names MUST use lowerCamelCase.
Dive into HTML5: In memory of Mark Pilgrim Mark Pilgrim is gone and with him all of his sites and work. I more than enjoyed his book “Dive into HTML5”. It was a bible of transitioning and progressive enhancement back when nobody was certain about the direction of HTML working groups and browser support. Mark Pilgrim left, but this book still lives on. Long ago, when Why the Lucky Stiff disappeared in a similar fashion, I saved his Poignant Guide to Ruby and re-published it online. Today, I’m republishing Mark Pilgrim’s Dive into HTML5. The eBook has an embedded table of contents, working cross-references, well-placed page breaks and tons of others tiny tweaks and enhancements. Download the Dive into HTML5 PDF eBookSee the sources for the HTML version in the GitHub repositoryBuy Mark Pilgrim’s HTML5: Up and Running from Amazon (Kindle/paperback edition of this book)
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.
La syntaxe d'une règle CSS Dans cet article nous allons étudier la structure d'une règle CSS et ses principales composantes que sont les sélecteurs et les déclarations. Nous verrons ensuite l'influence de la présentation du code CSS. Puis on abordera les notions de regroupement des sélecteurs et les propriétés raccourcies. A. Une feuille de style est structurée en règles CSS. Une règle CSS se décompose en un sélecteur et une ou plusieurs déclarations appelées bloc de déclaration se trouvant entre les accolades. Toutes les règles CSS sont donc écrites sur le même modèle : un sélecteur suivi d'une accolade ouvrante ( { ), puis une ou plusieurs déclarations chacune subdivisée entre propriété et valeur, se terminant par un point virgule. 1. Dans une règle CSS, le sélecteur correspond à la partie du code se trouvant en dehors des accolades. Dans cet exemple, la première règle va attribuer une bordure, des marges internes, la couleur blanche au texte et grise à l'arrière-plan de tous les éléments <div>. 2. B. C. D.
How to Identify CSS Elements On Any Template Easily | CSS For Bloggers: Part 7 - The Link Medic - Free Blogging Resources In Part 6, Learn the Anatomy of a Blogger Template I discussed a little about the basics of a standard Blogger template’s CSS setup. It was meant as a visual representation of how a CSS layout looks for beginners and a bit of a quick Thesis cheatsheet. But what if your Blogger template is radically different or you’re on WordPress or any other blog platform? Today I’m going to show you how to identify the CSS elements on any template using a very handy browser add-on called CSS Viewer I was debating putting this post as a Chrome Extension Must Have but it was originally a FireFox addon. Not only that, it ties in to my last CSS For Blogger’s post as well. CSS Viewer is a simple to use CSS property viewer that allows you to quickly find the name of the element you want to tweak. If you didn’t design the template then this can sometimes be a daunting task of viewing the source code and getting creative. Here’s some tips on how to use CSS Viewer: 1. 2. 3. 4. 5. Incoming search terms:
★ Pour ne plus être en REST, comprendre cette architecture Depuis quelques mois, j'apprends j'essaye d'apprendre REST et j'ai lu de nombreuses pages sans pour autant trouver d'explication simple, à la portée de tous. Du coup quand j'essaye d'expliquer les mécanismes et les avantages professionnellement, c'est pas toujours convaincant... et je voulais justement écrire un petit billet pour mettre tout ça au clair. Et puis je suis récemment tombé sur une série d'explications par Softies on Rails se basant sur des exemples concrets. En voici la traduction chronologique. Comprendre les ressources D'une certaine manière, apprendre REST fut très difficile pour moi. Si vous essayez de comprendre REST, cette série est faite pour vous. Les experts en HTTP, HTML et REST pourraient chercher la petite bête avec ma terminologie simplifiée me permettant d'aller droit au but. Premier point Commençons par le commencement. Et c'est à peu près tout. Deuxième point Remarquez comme j'ai glissé le mot « ressource » alors que vous ne l'attendiez pas. Troisième point Ugh.
HTML5 For Web Designers, Chapter 1 Home HTML is the unifying language of the World Wide Web. Using just the simple tags it contains, the human race has created an astoundingly diverse network of hyperlinked documents, from Amazon, eBay, and Wikipedia, to personal blogs and websites dedicated to cats that look like Hitler. HTML5 is the latest iteration of this lingua franca. While it is the most ambitious change to our common tongue, this isn’t the first time that HTML has been updated. The language has been evolving from the start. As with the web itself, the HyperText Markup Language was the brainchild of Sir Tim Berners-Lee. Sir Tim didn’t come up with the idea of using tags consisting of words between angle brackets; those kinds of tags already existed in the SGML (Standard Generalized Markup Language) format. From IETF To W3C: The Road To HTML 4 There was never any such thing as HTML 1. their documents using an <img> tag. At that time, HTML faced its first major turning point. XHTML 1: HTML As XML No, not really.
Responsive Navigation Demo: Top-Nav (Do Nothing) The top-nav pattern is the simplest responsive pattern. It's "do nothing" nickname isn't 100% accurate as you generally need to make a few changes, but those changes are fairly minimal. Here the main change is to move the navigation from below the logo on smaller screens, to it's right on wider screens. Additional media queries contain styles to adjust the padding of the links as space allows. The HTML Here's the html used to create the header of this page. <header><div class="container"><img class="logo" src="images/logo.png" width="252" height="46" /><ul id="demo-nav"><li><a href="">Back to Post</a></li><li class="current"><a href="top-nav.html">Top-Nav</a></li><li><a href="priority.html">Priority</a></li><li><a href="select.html">Select Menu</a></li><li><a href="select-js.html">Select Menu JS</a></li></ul></div></header> The Default CSS Here's the css that loads by default The CSS in Media Queries Here's the css included in media queries Tips
250+ Resources to Help You Become a CSS Expert CSS is the second-most-important thing you can master when it comes to web design, right after HTML. And the capabilities of CSS can be staggering (especially with the new CSS3 standard already making appearances in some browsers). If you can imagine it, it’s likely someone has already figured out how to do it with CSS. Below are more than 250 resources for mastering CSS. While they’re not likely to make it any less staggering, they can help you master the techniques that will help set your designs apart from the crowd. CSS3 Resources 30 Essential CSS3 Resources – A roundup of 30 great tutorials, tips, and other resources for what’s new in CSS3. 20 Useful Resources for Learning About CSS3 – A great collection of CSS3 tutorials. CSS3 Unleashed—Tips, Tricks and Techniques – A huge roundup of CSS3 resources broken down by category. 20 Very Useful CSS3 Tutorials – Another rundown of good tutorials for learning the new capabilities of CSS3. References and Cheatsheets Tutorials and Techniques
Inclure un fichier dans une page HTML sans utiliser <iframe> Si l'usage des inclusions en langage serveur n'est pas possible et si l'on tient à éviter l'usage contesté de la balise <iframe>, il est théoriquement possible d'utiliser la balise générique <object> pour inclure n'importe quel format de fichier au sein d'un document HTML. Cependant, bien que cela fonctionne parfaitement sur Firefox, tous mes essais sur Internet Explorer avaient lamentablement échoués jusqu'à ce jour. En fait, pour utiliser l'élément <object> sous Internet Explorer il faut en définir explicitement les dimensions : Merci à Xavier pour m'avoir ouvert de nouveaux horizons ;) Il reste un seul hic : pas moyen de supprimer ou cacher les vilaines barres de scroll autour de l'objet. EDIT de derrière les fagots Merci à Cassy d'avoir exhumé cette astuce et d'y avoir apporté une solution. Exemple pour page.html : c'est la page principale qui appelle l'objet <! ... puis il faut appliquer ces styles à la page fille object.php :