background preloader



TextWrangler TextWrangler TextWrangler is an all-purpose text and code editor for Mac OS X, based on the same award-winning technology as BBEdit, our leading professional HTML and text editor. We will be eventually retiring TextWrangler from our product line, and so we encourage anyone interested in TextWrangler to download and use BBEdit instead. We’ve put together a handy chart comparing BBEdit and TextWrangler, to help you out. Should I upgrade to BBEdit? BBEdit is TextWrangler’s elder sibling. A better free alternative BBEdit offers a 30-day evaluation period, during which its full feature set is available. After the evaluation period, BBEdit provides a modified set of features, which incorporates all of TextWrangler's features, and offers unique features of its own. How do I get BBEdit? Download BBEdit here. If you already have BBEdit and would like to update to the latest version, please go to our updates page. How do I get TextWrangler? Download TextWrangler here. TextWrangler System Requirements

CSSTidy View Mobile Websites in Windows with Safari 4 Developer Tools Want to try out mobile websites designed for the iPhone and other mobile devices on your PC? Safari 4 for Windows lets you do this easily with their developer tools. By default, Safari will show standard desktop websites. Getting Started First make sure you have Safari 4 for Windows installed. Or if you already have another Apple program installed, such as QuickTime or iTunes, then you can install it from Apple Software update. And then select Safari 4 from the list of new software available. Accept the license Agreement, and then Safari will automatically install. Once this is finished, Safari will be ready to use. View Mobile Sites in Safari First, we need to enable the developer tools. Click the Advanced tab, and then check the box that says “Show Develop menu in menu bar”. Once you’ve closed your settings box, click the page icon, select Develop, then User Agent, and then choose one of the Mobile Safari settings. Gmail loads messages with the default iPhone interface. Conclusion Links:

Les classes conditionnelles en HTML Les cancres du Web, Internet Explorer 6, 7 et parfois 8, nous mènent souvent la vie dure. Même quand on s’abaisse à leur niveau, il leur arrive de ne pas comprendre, ou d’y mettre de la mauvaise volonté. La solution classique (comprendre: à l’ancienne) est d’utiliser des hacks CSS. Nous allons voir dans cet article que l’utilisation habituelle des commentaires conditionnels a quelques inconvénients, et proposer une technique qui combine plusieurs avantages : les classes conditionnelles. Le problème des commentaires conditionnels Les commentaires conditionnels se présentent comme des instructions dotées d’une condition (if) et qui peuvent se placer à n’importe quel endroit du document (X)HTML. Il s’agit d’un mécanisme propre à Internet Explorer Windows, né avec la version IE5, et qui permet d’inclure dans une page HTML, de manière valide, une portion de code qui ne sera lue et interprétée que par IE, ou par l’une ou l’autre de ses versions. Une alternative ?

Dynamic Drive CSS Layouts- CSS Frames CSS Frames Layouts New (Dec 26th, 06'): The following are a collection of CSS Frames layouts, where select columns or rows inside the layout remain static even when the page is scrolled, mimicking a frames like behavior. Page 1 of 2 pages 1 2 > This is a two columns liquid layout with the left column being static, always in view. This is a two columns liquid layout with the right column being static, always in view. This is a two rows liquid layout with the top row being static, always in view. This is a two rows liquid layout with the bottom row being static, always in view. This is a three columns liquid layout with the leftmost and rightmost columns being static, always in view. This is a mixed columns and rows layout (two main columns, later split into two rows), with the leftmost column and top row being static, always in view. This is a mixed columns and rows layout (two main columns, later split into two rows), with the leftmost column and bottom row being static, always in view.

Writing efficient CSS selectors 17 September, 2011 Efficient CSS is not a new topic, nor one that I really need to cover, but it’s something I’m really interested in and have been keeping an eye on more and more since working at Sky. A lot of people forget, or simply don’t realise, that CSS can be both performant and non-performant. This can be easily forgiven however when you realise just how little you can, err, realise, non-performant CSS. These rules only really apply to high performance websites where speed is a feature, and 1000s of DOM elements can appear on any given page. CSS selectors CSS selectors will not be new to most of us, the more basic selectors are type (e.g. div), ID (e.g. More uncommon ones include basic pseudo-classes (e.g. Selectors have an inherent efficiency, and to quote Steve Souders, the order of more to less efficient CSS selectors goes thus: ID, e.g. Quoted from Even Faster Websites by Steve Souders The difference in speed between an ID and a class is almost totally irrelevant. N.B. #content {}

Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.

Review Of Cross-Browser Testing Tools - Smashing Magazine Advertisement Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages. Get the book now! At some point in the future, the way that all major browsers render Web code will likely be standardized, which will make testing across multiple browsers no longer necessary as long as the website is coded according to Web standards. The old-school way to test code was to load your website on as many computers as you could find, using as many different combinations of browsers and operating systems as possible. Free Cross-Browser Testing Link Good news: very powerful free testing tools are available for Web designers today. Adobe BrowserLab Link Browsershots Link Browsershots231 is probably the most comprehensive free testing tool available. SuperPreview (Free and Commercial) Link Lunascape 6 Link IETester Link Spoon Link

Guide de survie du positionnement CSS Cet article s'adresse à ceux qui ont déjà quelques notions de positionnement CSS, mais qui se demandent s'ils l'utilisent correctement, ou qui galèrent pour mettre en pratique leurs connaissances encore trop bancales. Comment s'y retrouver dans le machin tentaculaire qu'est le positionnement CSS? C'est un sujet à la fois complet (tant mieux) et complexe (ouille). Pour bien l'appréhender, il faut prendre en compte: les possibilités de CSS 2.1 pour l'affichage et le positionnement des éléments (et à l'avenir de CSS 3); celles qui sont implémentées dans les navigateurs (et donc pas les autres, sauf pour préparer l'avenir); les contraintes de mise en page et d'adaptation aux contenus (le contenu, ça va ça vient… et ça vous surprend toujours d'une manière ou d'une autre); les contraintes du média screen (on ne fait pas tout et n'importe quoi avec les hauteurs et largeurs, le centrage, etc.); les bugs éventuels des navigateurs (ou de certains navigateurs). Comment s'y retrouver?

Downloads- 978 Grid System for Web Design Introduction Welcome to This website is owned and operated by Brothers Roloff, LLC. By visiting our website and accessing the information, resources, services, products, and tools we provide, you understand and agree to accept and adhere to the following terms and conditions as stated in this policy (hereafter referred to as 'User Agreement'). This agreement is in effect as of Jan 22, 2011. We reserve the right to change this User Agreement from time to time without notice. Responsible Use and Conduct By visiting our website and accessing the information, resources, services, products, and tools we provide for you, either directly or indirectly (hereafter referred to as 'Resources'), you agree to use these Resources only for the purposes intended as permitted by (a) the terms of this User Agreement, and (b) applicable laws, regulations and generally accepted online practices or guidelines. Wherein, you understand that: a. b. c. d. e. f. g. h. i. Limitation of Warranties Governing Law