background preloader

CSS Specificity: Things You Should Know - Smashing Magazine

CSS Specificity: Things You Should Know - Smashing Magazine
Advertisement Apart from Floats1, the CSS Specificity is one of the most difficult concepts to grasp in Cascading Stylesheets. The different weight of selectors is usually the reason why your CSS-rules don’t apply to some elements, although you think they should have. In order to minimize the time for bug hunting you need to understand, how browsers interpret your code. And to understand that, you need to have a firm understanding on how specificity works. CSS Specificity isn’t simple. Let’s take a look at some important issues related to CSS Specificity as well as examples, rules, principles, common solutions and resources. You can find the most important things you should know about CSS specificity in a brief overview at the beginning of the article. CSS Specificity: An Overview What is Specificity? Specificity determines, which CSS rule is applied by browsers. Specificity hierarchy Every selector has its place in the specificity hierarchy. How to measure specificity? Specificity Rules Related:  Web Development

CSS: Specificity Wars CSS: Specificity Wars Join me, and together we can rule the galaxy as father and geeks! A few weeks back in Cupertino, I saw Aaron explain how the specificity of CSS selectors is calculated in a way which I hadn't seen before. Then today I came across a knotty problem while building XHTML and CSS templates for a new project where two selectors behaved differently to how I expected and I realised that I had not completed my training. The Dark Side My problem was a simple one, how to feed a transparent PNG image to browsers which support transparency and a GIF image to older browsers which don't, without resorting to hacks. <div id="nav-supp"><p><a id="a-02" href="#webstandards-org">Top</a></p><! and my CSS starting point. I had assumed that a modern browser would see and apply both rules (with the second overriding the first) and that an older browser which does not understand attribute selectors would see and apply only the first, ignoring the second. Sith Lords Too much! Resources Replies

ClearFix Le « clearfix » est une astuce utilisée pour éviter le dépassement des blocs flottants, en plaçant tout simplement la class .clearfix sur le bloc conteneur. Voici le code CSS à placer dans votre feuille de style : Voici comment le lire ce code, qui n’est pas évident : La première déclaration concerne les navigateurs conformes (si tous les navigateurs respectaient les standards, ce serait la seule nécessaire). Grâce à la pseudo-classe :after, elle crée un bloc invisible après l’élément porteur du sélecteur « clearfix », ce qui remplace tous les abominables br.nettoyeur et autres espaceurs de blocs. Il existe quelques variantes de ce code de part le Web, qui améliorent peu ou prou la contribution originale qui, un peu ancienne, concerne des navigateurs aujourd’hui disparus. Cette astuce s’emploie ainsi dans vos pages HTML, par exemple : <div class="clearfix"> <div class="BlocA">Bloc flottant A</div> <div class="BlocB">Bloc flottant B</div> </div>

Performance & Organization - Learn to Code Advanced HTML & CSS Having the ability to write HTML and CSS with a solid understanding is a great expertise to have. As a website’s code base and traffic grows, a new skill set comes into play, one that is extremely important to both development time and user experience. Knowing the fundamentals of website performance and organization can go a long way. The organization and architecture of a code base can greatly affect not only the speed of development, but also the speed at which pages render. Additionally, taking a few small steps to improve the performance of a website can pay off in dividends. Strategy & Structure#strategy-structure The first part to improving a website’s performance and organization revolves around identifying a good strategy and structure for developing the code base. Style Architecture Exactly how to organize styles boils down to personal preference and what is best for a given website but generally speaking there are best practices to follow. Object Oriented CSS Keep Selectors Short

80+Download Free CSS/HTML Templates Layout 2010 « CSS Templates - FreshDesignWeb All professional free CSS/HTML templates for easy design website. It is important for web designer to find new CSS/HTML layout web templates to improve the ideas design, However, the templates was used by other already but they take some part of the templates to create new one by mix more templates together. If you are looking best html and css templates to create your website. You may like my favorite collected html/css templates for purpose such company, product, service, business, shop, wedding, restaurant, portable, electronic shop, book store, jewelry shop, medical clinic, beauty and real estate…etc. The CSS templates layouts was design by Cascading Style Sheets (CSS) to make professional website design and also improve website performance. i hopeful that this collection will save you some time in your design and development. You may like this: Free HTML5 Templates Caprice – Free HTML Template Caprice is free css html template with layout fix left menu navigation Demo More Info Retina

Les feuilles de style en cascade, niveau 2 Recommandation du W3C du 12 mai 1998 Cette version : Dernière version : Version précédente : Rédacteurs : Bert Bos <bbos@w3.org>Håkon Wium Lie <howcome@w3.org>Chris Lilley <chris@w3.org>Ian Jacobs <ij@w3.org> Résumé Cette spécification définit CSS2 : les feuilles de style en cascade, niveau 2. CSS2 est construit sur CSS1 (voir [CSS1]), ainsi toute feuille de style valide en CSS1 est également valide en CSS2 à très peu d'exceptions près. Statut de ce document Ce document a été vérifié par les membres du W3C et d'autres parties intéressées et le Directeur l'a approuvé comme Recommandation du W3C. Une liste des Recommandations actuelles du W3C et d'autres documents techniques peut être trouvée à Les discussions publiques sur les fonctions de CSS ont lieu sur la liste www-style@w3.org. Formats disponibles Langues disponibles

Making the Transition from Development to Design—My Experience and Advice A couple months ago, a person emailed me asking for tips for transitioning to design from a development background. As someone who had loosely gone through the same path (from programming to design to programming then back to design), I wanted to share any advice I could possibly give. After writing the letter, I thought it may be useful to a few other people out there. So if you are a developer looking to get into design, this is written specifically for you. Remember, these are tips based on my personal philosophy and things that have shaped my approach. Tip #1: Don’t stop building things It will not be long before anyone designing software will require an understanding of how to make software. It is important to keep your development skills honed. Tip #2: Learn design in order of dependency Trying to tackle the entire universe of design at once will set you up for failure. These steps gradate from the rational to the emotional. Tip #3: Design everything you do

Style Effect Using CSS and Javascript « CSS & JQuery - FreshDesignWeb 1. Hover Slide Effect with jQuery Today we will create a neat effect with some images using jQuery. The main idea is to have an image area with several images that slide out when we hover over them, revealing other images. The sliding effect will be random, i.e. the images will slide to the top or bottom, left or right, fading out or not. Download (4455) | View Demo | Link Site 2. Once upon a time when a web design required a nice, functional and scalable button it needed to be designed in photoshop at first, implemented with the sliding doors technique later and you may have had to spice things up with a little javascript in the end. Download (557)| View Demo | Link Site 3. Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. Download (628)| View Demo | Link Site 4. In this tutorial we’ll show you how to create a panel with slide-out content at the top of you page (like the one in this page) using jQuery. 5. 6. 7. 10.

BlueGriffon, l'éditeur HTML basé sur Firefox - Alsacréations Dans le monde des éditeurs de code HTML, nous connaissons les logiciels dits "visuels" (ou "WYSIWYG") tels que Adobe Dreamweaver, Microsoft Frontpage et Expression, ou encore les éditeurs de texte simples dont font partie Notepad++, PSPad, jEdit, UltraEdit, etc. Entre les deux... pas grand chose ! Seuls NVU, puis KompoZer se démarquaient en proposant une solution libre, visuelle et légère, dont le code produit était dénué de surcouches propriétaires et complexes. Leur successeur, développé par la société Disruptive Innovations, se nomme BlueGriffon et commence à faire parler de lui tant il est déjà prometteur avant d'atteindre sa première version finalisée. BlueGriffon se démarque notamment par son support exceptionnel de CSS3 et HTML5 et propose des boîtes de dialogues évoluées permettant par exemple d'afficher des polices de caractères exotiques ou une disposition en multi-colonnes.

of Action - You're already a pretty good designer I'm a seasoned hacker that is able to tackle immensely complex problems with aplomb. I'm able to untangle spaghetti code and weave it into beautiful patterns. I envision systems and code them with the same grace a jazz pianist improvises music.But I can't design for my life. Please help. I've heard this story a couple of times in the ten years I've been working with programmers. The programmers' approach to building a cathedral would involve using his tools and raw materials in order to build more advanced objects. Our craftsman follows the architect's plans religiously, and painstakingly chisels every stone so that every brick fits in perfectly. Once finished, he steps back and mesmerized by the beauty of it all, he thinks 'Hey, I built this cathedral all by myself, perhaps if I tried designing my own cathedral I'd get all the praise, instead of this lazy hack who just handed me the layout and waited for it to be built'. 1. 2. 3. Now, let's get to the good stuff: You are already creative

Related: