Update: CSSCompact - WebHandler
Only a minor code update: CssCompact: A WebHandler for shrinking CSS files (ASP.NET) . Code I am developing will go on GitHub/SamWM at some point (already has my jQuery plugins and ASP code I wrote a while back).
Posts
HTML 5 Basic Template
Since HTML 5 is likely to be in common use at some time in the future (taking advantage of current/future web browsers standards rendering mode) and the W3C validation service now validates HTML 5. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>Site | Page 1</title> </head> <body> <div id="outer"> <div id="top"></div> <div id="inner"> <div id="header"><h1>Page 1</h1></div> <div id="navigation"> <ul> <li class="current"><a href="#">Page 1</a></li> <li><a href="#">Page 2</a></li> <li><a href="#">Page 3</a></li> </ul> </div> <div id="content"> <p>Lorem ipsum dolor sit...
Tabs without JavaScript
It is possible to implement a tabbing system without needing to use JavaScript. All you need is CSS and standard (X)HTML. The downside is that you won't get styling on the active tab to indicate that it is active. CSS: div.tabcontainer { width: 500px; background: #eee; border: 1px solid #000000; } ul.tabnav { list-style-type: none; margin: 0; padding: 0; width: 100%; overflow: hidden; } ul.tabnav a { display: block; width: 100%; } ul.tabnav a:hover { background: #ccc; } ul.tabnav li { float: left; width: 125px; margin: 0; padding: 0; text-align: center; } div.tabcontents { height: 290px; background: #ccc; overflow: hidden; border-top: 1px solid #011; padding: 3px; } div.tabcontents div.content { float: left; width: 100%; height: 102%; overflow-y: auto; } div.tabcontents div.content h2 { margin-top: 3px; } HTML: <div class="tabcontainer"> <ul class="tabnav"> <li><a href="#tab1">Tab 1</a...
Analyse performance of web pages with YSlow
YSlow is a plugin for Firefox developed by Yahoo that analyses your web pages and reports back on any performance issues (plus gives a grade). There is a performance report (which shows you areas which can be improved), stats (overview of what is loaded, cached/uncached, cookies and number of HTTP requests), components (page, CSS/JS,JPG etc - expiry, if gzip used, response time, ETag and file sizes) and various tools (view all CSS/JavaScript and a JSLint report). This plugin depends on Firebug .
Form Layout Using CSS
I have created a sample for laying out fields within a fieldset (so that the labels are all lined up) - I use a fieldset as they are handy for grouping related fields together. Nothing too fancy, but it can be used as a basic for something better. Works with Internet Explorer 6 and 7, Firefox 2 and Opera 9.02.
CssCompact: A WebHandler for shrinking CSS files (ASP.NET)
Update (20 Feb 2010) : Static regular expression, compiled (performance improvement, but will be negligible for low volume sites). See Compacting CSS on-the-fly for an HttpHandler based on this. Update (08 July 2009) : Check file extension is CSS. CssCompact is a simple WebHandler for sending smaller CSS files to the client. It simply removes linebreaks, tabs, spaces (before CSS properties) and comments. That way you can still have your commented CSS code, and also save bandwidth. Use is simple, just pass on the stylesheet as a parameter when loading your stylesheet: Add to <head> : <link rel="stylesheet" type="text/css" href="/style/CssCompact.ashx?stylesheet=/style/style.css" /> or <style type="text/css"> @import "/style/CssCompact.ashx?stylesheet=/style/style.css"; </style> Create CssCompact.ashx : <%@ WebHandler Language="C#" Class="CssCompact" %> using System; using Syste...
Controlling browser scrollbars
In Firefox, the vertical scrollbar only shows when the page contents do not go beyond the height of the browser window (i.e. you just have a simple 'Hello World' or very little content on your page). On the other hand, the scrollbar always shows if you are using Internet Explorer. For consistency across these (and possibly other browsers as well), you can apply a little bit of CSS. To make IE behave like Firefox (only show scrollbar when needed), just do this: html { overflow-y: auto; } To always show the scrollbar (to prevent the layout changing when more content-rich pages are loaded on your site): html { overflow-y: scroll; } I also use the same trick to only show scrollbars in <textarea> 's when needed: textarea { overflow: auto; }
Firebug Lite
While Firebug only works on Firefox, there is an option for other browsers (IE, Opera, Safari) called Firebug Lite . While not as powerful as the full Firebug, it is still a good way to debug for other browsers. You just include it on your page as you would any external JavaScript file and then press F12 on the page to show the console.
Firebug 1.0 Beta 1
Firebug 1.0 is available as a beta version. Initially it was going to be a commercial extension, but it looks like it will be open source. Hopefully it will be maintained (and not just by one or two people), although I am not sure how it can be improved (aside from working on IE as well). Very good for debugging (JavaScript and CSS) as you can set breakpoints, view a box-model representation of any selected element, disable CSS (down to specific properties (i.e. font-size)) and more. Get Firebug and make a donation to show your appreciation for Joe Hewitt's hard work.
Create CSS Class (JavaScript)
This function ( createCSSClass ) creates a new class with the given style. However, it does not work in version of Opera prior to 9, due to lack of support for document.styleSheets . For example, if you want all text in a pre element bold, you would do createCSSClass("pre", "font-weight: bold") . Note, that if you already have the rule defined, it will replace it, unless it is not a stylesheet with media type 'screen' (or media not set) or it is not the first linked/embedded screen stylesheet. So for example, if you had the following: <link rel="stylesheet" href="print.css" media="print" /> <link rel="stylesheet" href="screen.css" /> <style type="text/css">pre { border: 1px solid #000}</style> When you do createCSSClass("pre", "font-weight: bold") , it will replace the rule in screen.css (or add it if it does not exist). Any styles defined in print.css...
Left Align Captions in Firefox
In Firefox (and other Mozilla browsers I presume) when you try <caption align="left">caption aligned</caption> it does not behave as expected - the table contents is shifted to the right of the caption. To fix this the following CSS is used: caption.left { text-align: left; caption-side: top; width: 100%; } To use on the page, the HTML code becomes this: <caption align="left" class="left">caption aligned</caption> However, using the following CSS is a better method (ignored by IE), as you do not need to change your HTML code: caption[align="left"] { text-align: left; caption-side: top; width: 100%; }