CSS Analyser Contents Translations Spanish Version About this Service This service has been provided to allow you to check the validity of your CSS against the W3C's validation service, along with a colour contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement. A special thank you to Roberto Scano who suggested extending the service to incorporate the validation of CSS, and validating units of measurement. [Back to the contents] Colour Contrast Guideline 2.2 of the Web Content Accessibility Guidelines 1.0 requires that foreground and background colour combinations provide sufficient contrast when viewed by someone having colour deficits, or when viewed on a black and white screen. This page is provided to allow you to check the contrast of two colours using the W3C's colour contrast algorithm. Units of Measurement Guideline 3.4 of the Web Content Accessibility Guidelines 1.0 suggests using relative rather than absolute units for style sheet property values.
A CSS Sticky Footer A CSS Sticky Footer that just works We've all tried to use a CSS Sticky Footer one time or another, but they never seem to come out right, do they? Well, the days of a hard to understand CSS Sticky Footer are thankfully over. Usage of the CSS Sticky Footer Great! Absolutely. View the CSS or learn about using it NEW: HTML5 Sticky Footer CSS drop shadow Technique to build flexible CSS drop shadows applied to arbitrary block elements. Most of the existing techniques for creating element shadows use images, this one doesn't. IT uses plain simple CSS. Technique to build flexible CSS drop shadows applied to arbitrary block elements. First include the style sheet at the top of your code. Source code for index.html Source code for webtoolkit.shadow.css
Supercharged Javascript Filed: Sun, Feb 04 2007 under Programming|| Tags: .htaccess php compress concatenate javascript As frameworks like prototype, jquery, and YUI become more and more popular, external javascript loads grow dramatically -- dragging down the performance of your page. Compressing the javascript statically (covered in Compressed HTML Makes Your Pages Zippy) is one option to regain page-loading efficiency, however if you change one file you'll need to make a new compressed copy and that's quite a bit of maintenance work. Pre-compression also doesn't solve a multiple connection issue. Introduction If you have access to an apache web-server and php scripts, there is a simple, elegant solution that will let you turn this... Into this... All of the requested files will be dynamically concatenated on the server, compressed and sent as one single file (and thus one single http connection) back to the browser. Upload it and forget it -- the script will handle everything for you automatically. Addendum
Free Essential Tools for Blogger Blogs Which are the best Blogger tools? Blogger has a simple and fine interface that takes care of many things for you. This is my suggestion to you for your first free essential must haves for your blog. Advertisements Free Blogger tools 1. It can give you a cool feed count chicklet button to show how many readers are using your feed to read your blog. 2. The benefits are that you can edit Haloscan comments, and open them in a pop up and keep them separate from your post (Blogger allows you to only delete comments and not edit them, also on the post page all comments will show whether you like it or not). The main disadvantage is it will not email you these comments (like Blogger) for free and it is difficult to track where these comments were made. 3. 4. 5 – Sitemeter – Just takes 5 minutes to get a free tracker which gives you realtime site traffic statistics to check the quantity and quality of your site traffic with detailed referrer and geographic data. 6. 8. 9. 10. 11. 14.
webdev.stephband.info Download git clone github.com/stephband/jparallax Instantiation jQuery( '.parallax-layer' ).parallax( options ); What does jquery.parallax do? jParallax turns nodes into absolutely positioned layers that move in response to the mouse. With a bit of CSS you can either set up windows to see these layers through, or leave them free to roam about. The diagram on the right illustrates what jParallax does to the html: and here's a demonstration with some images: More demos demos/index.html demos/stalkbuttons.html - multiple parallax. demos/remotecontrol.html - parallax by remote control. demos/thumbnails.html - beautiful interactive thumbnails. demos/target.html - demonstrates how smoothly jParallax handles window resizing. Using jParallax The default behaviour of jParallax is to show the whole width of a layer in response to the mouse travelling the whole width of the mouseport. There are various ways to style jParallax effectively. Options Layer Options Events
Разработка с Веб-Стандартами Русский перевод — Александр Шабуневич Содержание 1. Введение Этот документ, объясняющий как и почему следует использовать веб-стандарты, позволит вам создавать веб-сайты, экономя время и деньги разработчика и оставляя лучшее впечатление у посетителей. Также будут обсуждаться другие методы, руководства и примеры, которые могут помочь в разработке максимально доступных высококачественных сайтов. 2. Когда интернет и веб стали действительно популярны во второй половине 90-х, производители веб-браузеров еще как следует не подготовили реализацию CSS — каскадных таблиц стилей — для веб-разработчиков, чтобы позволить им контролировать внешний вид HTML-документа. Плохая поддержка CSS в браузерах, сопровождаемая повышенными требованиями графических дизайнеров, желающих получить уровень контроля как при работе с печатными материалами, привели к неправильному употреблению HTML для визуального представления веб-страниц. 3. Что такое веб-стандарты? Структурные языки Языки представления Объектные модели 4.
CSS Layouts Listing Cross browser FIXEDFixed header and footer, scrolling content. Simple minimum width layoutA layout to demonstrate min-width in Internet Explorer. Back to BASICSThe bare essentials of Layout 3. Back to BASICS 2The bare essentials of Layout 2. CSS Frame - The Holy GrillA method of emulating a 'frame' layout. position:fixed; (fixed)Position fixed for Internet Explorer. Shrink your bodyResizing the body tag to create a fixed layout. IE6 only web siteThis was for IE only, but now Firefox will work. 'Fixed' layout version 1Fixed width, header and footer 100% high. 'Fixed' layout version 2Full width and height. 'Fixed' layout version 4Full height, fixed header and footer, multiple scrolling columns. Semi-fixed footer28-11-2008A semi-fluid layout with a semi-fixed footer. 100% 'background' imageAdding an image in the background that resizes when the window resizes. A responsive layout01-05-2013A reponsive layout with animated repositioning. 'Fixed' layout version 3Full width and height. Information
Nimble Method: Guerrilla's Guide to Optimizing Rails Applications The Battle For Performance Rails is slow. Your rails application which does fairy simple database operations will be born slow and will eventually become slower and slower while still not doing anything fancy. Having said that, I can virtually hear the herd of voices screaming "dude, optimize your own application and don't blame Ruby and Rails for everything". The winning tactics for this battle is guerrilla tactics. Ruby-Prof: The Guerrilla's Weapon Acunote, our pet rails application, often need to copy a bunch of ActiveRecord (AR) objects. Let's measure 3 things: the real time request takes in production environment;processing time profile information using the excellent ruby-prof profiler by Charlie Savage and Shugo Maeda;memory profile information gathered with patched ruby-prof (I took Sylvain Joyeux's memory allocations measurement mode patches and hacked together my own ruby-prof memory size measurement mode). So, for "copy 120" request we get: Task#save ... Great! Ok. That's it.
ies4osx A Hand-Coded Designer CSS UI Kit Web UI sets have been around for ages, but this takes things a step further. This free UI Kit is coded by hand using HTML5 and CSS3 so you can easily drop these elements into any project you're working on. This code is made to take advantage of modern browsers and to degrade gracefully in older versions of internet explorer, so no matter what your client or visitor is using they will be see an excellent design. Most major web elements are included -- buttons, tables, headings, etc -- and each of these is done in six color variations. Just pick the element you need, insert a few lines of CSS, and copy the HTML elements into your document. Preview A screenshot of UI set is below, but to really see what this looks like you should take a look at the live preview. How to Use This HTML5 UI kit uses very few tweaks to work in all browsers and you can get started in just three steps. Internet Explorer Compatibility Include the CSS Insert the HTML That’s it! License, Usage, and Sharing
How to Use CSS to Solve min-width Problems in Internet Explorer By Stu Nicholls. Introduction The lack of support for minimum width in Internet Explorer has caused many problems for web designers. Until now, the only way to emulate min-width is to use either JavaScript or Internet Explorer expressions (indirect JavaScript). Method The basic idea is to feed browsers that understand min-width the normal method (as follows) and to also feed Internet Explorer it's own special styling (which I'll explain in the following tutorial). The CSS body - general body styling background: #fff url(rule.gif) 20px 0; - shows the background grid (10 pixel and 100 pixel marks). color: #000; - sets the font color to black. font-family: "trebuchet ms", "times new roman", times, serif; - sets up the font choice. margin: 20px; - sets the margin to 20 pixels. padding: 0; - sets the padding to zero. .width - the outer div that controls the width and min-width for browsers that understand this (or just the width for Internet Explorer). The (X)HTML Normal method demo 1 Step 1 Step 2
Bamboo Blog - Database Optimization for Rails Apps Summary Use STRAIGHT_JOIN if MySQL is doing something sillyMySQL Datetimes are not slow MyISAM is much, much faster than InnoDB Consider MySQL partitioning; it's not hard Watch out for background optimisation and query caching Log everything you do, and why The reporting application I'm working on does a date-range select against a table with ten million rows. Straight Joins The original SQL statement was 12 lines, featuring three joins, a group-by and a computed column. To start with I used EXPLAIN SELECT to look at the execution plan. I added STRAIGHT_JOIN to the SQL statement and dropped the execution time to 20 seconds. Use STRAIGHT_JOIN if MySQL is doing something silly. Finding the Weak Point Progress; MySQL was now table-scanning a 10 million row 'events' table to satisfy the WHERE clause, then joining the other three tables by ID, grouping and summing. This isolated the slow part of the query. Indexes Dead End: Int Conversion Then I created indexes on the columns and tested again.