- Accessible Javascript - WAI-ARIA Overview ARIA will allow accessibility information to be added to XHTML markup in order to inform user agents as to the nature of dynamic content. The goal is to make ARIA features standard from HTML 5. Accessible Web 2.0 Applications with W...
- Accessible hiding content with CSS - Using display:none can also hide content from screen readers. If you do this, best use visibility:hidden as well, to ensure consistent behaviour in all readers. .hide{ display:none; visibility:hidden; } To hide from visual display but not screen...
- Accesskey standards - The following was lifted from an article called Accesskey standards | clagnut/blog written by Richard Rutter. Note that I haven't actually adopted them for mindspill.net yet, but I will soon. --- Begin article --- One of my goals for Cla...
- Anchor target in embedded object - If you use the object tag to embed one web page within another, you may need to open links from the embedded page in the top-level window. There are a number of ways to do this, as shown by the example below where the first 5 links will open in the...
- Browsers' reserved keys (i.e. characters not to use for accesskeys) - Alt is normally the access key modifier, e.g Alt-c will trigger the link associated with the c character. mindspill.net that'll lead to the computing page.--> When assigning access keys you must avoid using characters that are also used by the browser...
- Bugs - Good reference site: Position Is Everything Get margin when no border Problem: A div seems to have a margin when it doesn’t have a border. Giving it a 1px border and the margin disappears.
- Changing style with CSS according to markup position - You can use the + symbol in css to alter the way markup is styled according to it's position in the document. This page demonstrates how the boldness of text can be increased the lower in the document the text appears. View the source code. See 5.7 A...
- Consistent margins with CSS - Adjacent margins will collapse. CSS tutorial - Margin Collapsing Collapsing Margins In order to have consistent gaps around the edges of a content area you need to ensure the content area has a margin so that it collapses with any contained con...
- Cross-browser Compatibility - This page list of some issues faced when writing HTML, CSS or JavaScript for different browsers. It will not cover the difference between their object models, only relatively unexpected differences. It is far from complete. Each issue was...
- CSS menu with images - I've written 2 pages illustrating how to create a nice looking menu by displaying images instead of the anchor text, using a stylesheet. There are no tables to structure the layout of the menu, instead the menu items are in an unordered list wh...
- Drop-down menu being hidden - If you get a drop-down menu that’s being hidden behind some content, make sure that all elements surrounding the menu have overflow:visible set and that the menu’s z-index is larger than the elements it need to appear over. E.g. I once wor...
- Font sizing for accessibility and usability - You need to use a scalable font size rather than pixels (Internet Explorer doesn't scale pixels). The em unit is best. The default font size in most browsers is 16px. So 1em is equivalent of 16px. For easy use of ems, set the font size on the body elem...
- Prevent floated content extending beyond main content. - A common design for web pages is to have main content and a sidebar. Often, CSS is used to float the sidebar or the main content (or both) so that they can sit next to one another. Because floats are outside of normal page flow, this can lead to a prob...
- Security restriction with page refresh in a frame - Due to security restrictions certain browsers will not allow you to refresh a page from an external site that is framed in your site. To get around this, load a local page into the frame. Use the Javascript onload event to redirect the page to the ex...
- Underscores in CSS identifiers - Do not use underscores in CSS identifiers. The W3C CSS 2.1 Specification states that identifiers are allowed to contain underscores. However, the CSS 1 spec and the first draft of the CSS 2 spec made no mention of them, so some older br...
- Why use web standards (e.g. CSS instead of tables)? - This page links to a number of articles that clearly explain the considerable benefits of adopting web standards (and using css instead of tables for design). Why tables for layout is stupid – A good introductory presentation about why you sho...
- XHTML Popup Link - function targetBlank (url) { blankWin = window.open(url,'_blank','menubar=yes,toolbar=yes,location=yes,directories=yes,fullscreen=no,titlebar=yes,hotkeys=yes,status=yes,scrollbars=yes,resizable=yes'); } If you're writing XTHML 1.0 then...
- (X)HTML validation with JavaScript - The W3C XHTML validator will complain if you've got JavaScript embedded in your markup and you haven't taken steps to make it (X)HTML friendly. Either move the JavaScript into a file (in this example called script.js): <script src="script.js" ty...
Web Design Notes
Last modified: 04/06/2007 Tags: (none)
