Posts Tagged ‘html’
Wednesday, September 1st, 2010
I was recently working on a website that had a black/dark background and while the typical suite of browsers that I test with seemed fine, Safari showed an annoying white flash when the page was loading.
Some research into this lead to a startling discovery as I personally consider this a bug in the Safari browser’s rendering. It’s often referred to as FOUC (Flash of Unstyled Content). There are several methods that I’ve seen, most employ JavaScript or ordering of CSS files to hide the <body> prior to the page completely loading.
The simplest fix, while not elegant, is to an explicit ’style’ attribute on the <html> tag.
<html style=”background-color:black;”>
Reference:
![]()
Tags: background, color, flash, fouc, html, safari, webkit
Posted in Safari bugs, WebStandards, Work | No Comments »
Wednesday, March 31st, 2010
Okay, so this one’s a little old, and I just found it while looking at some of Microsoft Update’s HTML source, it appears to be relevant for MSIE6 and newer and may be responsible for some interesting styling and behaviour of form components.
A quick search for it turns up lots of discussions about other browers such as Firefox being effected if the value is not defined… as such it’s likely a good idea to define it in your pages to be sure.
An old MSDN entry reads…
When running on Windows XP, Internet Explorer 6 and the content displayed in it sports a look and feel that matches the Windows XP platform. You can opt to have your HTML content not take on the same look as the operating system for elements such as buttons and scroll bars, by adding the following META tag:
<meta http-equiv=”MSThemeCompatible” content=”no” />
Cheers
![]()
Tags: button, checkbox, css, form, html, meta, msie, msthemecompatible, radio
Posted in MSIE bugs, WebStandards, Work | No Comments »
Thursday, October 29th, 2009
Here’s a useful trick for minimizing server HTTP connections, unfortunately it’s not universally supported so you will need to provide alternate methods for non-supporting browsers (such as MSIE).
This works by placing the content of the image into the URL itself, as such there’s no need to open up a new server connection and no extra caching at any tier.
<img src=”data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/ /ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7″ alt=”embedded folder icon” width=”16″ height=”14″ />
![]()
Tags: base64, data, html, http, image, img, network, optimization, performance, url
Posted in WebStandards, Work | No Comments »
Wednesday, February 11th, 2009
I spend a LOT of time trying to optimize web applications to run and appear as fast as possible, one of the most valuable tools I have in my “bag of tricks” is the YSlow! plugin for Firefox.
It integrates in the browser and gives a near real-time scoring of the pages you visit and suggestions on how to improve them. While some of the suggestions are not practical (for example: use of a CDN) the bulk of them can be applied to your application code or server with a little bit of work.
The rules and scoring mechanisms are well documented at the following website:
http://developer.yahoo.com/performance/
The YSlow! plugin is available here:
http://developer.yahoo.com/yslow/
Happy… Faster Surfing!
![]()
Tags: browser, cache, firefox, html, http, javascript, network, performance, plugin, speed, standards, yslow
Posted in WebStandards, Work | No Comments »
Monday, June 2nd, 2008
I was recently looking back at some websites I’d created years ago and realized just how much of a hastle the HTML FORM tag used to be for page layouts. This generally resulted in non-valid markup where the FORM tags themselves were improperly nested in TABLE, TR and TD tags.
Other than the obvious accessibility and semantic markup issues, there are two specific items that must be realized about the layout when working with a FORM.
The following examples assume the following source:
Hello<form>Again</form>World
FORM is a block element, forcing content around it to be separated:
Example displays as:
Hello
Again
World
- FORM generally has a bottom margin to push content down below it.
Example displays as:
Hello
Again
World
- CSS can fix both of these cases depending upon your specific problem:
<style type=”text/css”>
form { margin-bottom:0; display:inline; }
</style>
Example displays as:
HelloAgainWorld
Cheers!
![]()
Tags: form, html, layout
Posted in WebStandards, Work | No Comments »
Tuesday, May 27th, 2008
Over the past few years, JavaScript has evolved from a website ‘add-on’ (primarily for non-critical features like animations) to a requirement for use. Many sites still rely on the tried and true ‘noscript’ tag for this purpose, unfortunately, it’s not always practical or accessible to do so.
A better way would be to use standard markup in the page, but use the scripting to ‘hide’ the content you don’t want users with JavaScript enabled to see.
This can be taken to great lengths, but here’s a very simplified example:
<div id=”noscript”>Please enable JavaScript to use this feature.</div>
<script type=”text/javascript”>
var obj = document.getElementById(’noscript’);
obj.style.display=’none’;
</script>
REFERENCES:
Cheers!
![]()
Tags: css, html, javascript, noscript
Posted in WebStandards | No Comments »
Tuesday, April 15th, 2008
Occasionally, there come a time when old tricks become handy on solving new problems. Recently, an application that I support had some serious network latency when attempting to open a popup consisting exclusively of static content. While this small page came from a webserver with appropriate caching headers being sent, it still took upwards of 2 seconds for the page to be displayed by the client browser because of network latency issues.
True, this was for MSIE, and there are some notorious performance issues with the javascript used for popups, but those are different topics to be discussed later.
Old implementation, loads content of ’somefile.html’ as a url popup:
<script type=”text/javascript”><!–
function testwindow(){
var linkWin = window.open(’/somefile.html’,”,’width=300,height=200,scrollbars=no,toolbar=no’);
}
// –></script>
<a href=”javascript:testwindow();”>TEST</a>
New implementation, creates content of ’somefile.html’ in javascript instead:
<html>
<head>
<title>Popup Demo</title>
<script type=”text/javascript”>
function testwindow(x) {
var content;
var linkWin = window.open(”,”,’width=300,height=200,scrollbars=no,toolbar=no’);
if (!linkWin.opener) { linkWin.opener = self; }
content = “<!DOCTYPE html><html><head>”;
content += “<title>Example</title>”;
content += ‘</head><body bgcolor=”#ccc”>’;
content += “<p>Any HTML will work, just make sure to escape \”quotes\”,”;
content += ‘or use single-quotes instead.</p>’;
content += “<p>You can even pass parameters… (” + x + “)</p>”;
content += “</body></html>”;
linkWin.document.open();
linkWin.document.write(content);
linkWin.document.close();
//return false;
}
</script>
</head>
<body>
<a href=”javascript:testwindow(’this is x’);”>TEST</a>
</body>
</html>
NOTE: there is one small performance tradeoff here, in the ‘new’ case you will always be downloading the content of the popup, even if you never use it. This can be remediated by adding it to an external static .JS file.
Cheers!
![]()
Tags: browser, html, javascript, popup, window
Posted in WebStandards, Work | No Comments »
Thursday, February 28th, 2008
This is a fairily standard interview question for someone that claims to understand CSS, but you’d be amazed at the number of developers that just don’t get it.
Assuming
<style type=”text/css”>
div#error { color:red; }
div.error { color:red; }
</style>
<div id=”error”>This is error text shown in red.</div>
<div class=”error”>This is also error text</div>
Notice that an ID’s CSS is an HTML element, followed by a “#”, and finally ID’s name – “element#idname”.
Also, be sure to absorb the fact that when an id is used in HTML we must use ‘id=”name”‘ instead of ‘class=”name”‘ to reference it!
A simple way to remember this is to refer back to how you think of page anchors. Those URL’s must also be unique and use the “#”.
Why Did They Choose Those Names??
- ID = A person’s Identification (ID) is unique to one person.
- Class = There are many people in a class.
NOTE: You can also use inline styling (with no id or class), or style the HTML elements themselves, but those will be covered in a later posts.
![]()
Tags: class, css, html, id, style
Posted in WebStandards | No Comments »
Friday, February 15th, 2008
This is knowledge that is generally “tribal” by nature, reserved to only the nerdiest web developers, recently I was asked to name these and failed. Here’s the bounty of my research.
Gecko is generally considered to be the second most-popular layout engine on the Web, after Trident (used by Internet Explorer for Windows since version 4), and followed by WebCore (used by Safari) and Presto (used by Opera).
Gecko is the open source, free software web browser layout engine used in all Mozilla-branded software and its derivatives, including later Netscape browser releases. Written in C++ and licensed under MPL/GPL/LGPL triple license, Gecko is designed to support open Internet standards. Originally created by Netscape Communications Corporation, its development is now overseen by the Mozilla Foundation.
Trident (also known as MSHTML) is the name of the layout engine for the Microsoft Windows version of Internet Explorer. It was first introduced with the release of Internet Explorer version 4 in October 1997, has been steadily upgraded and remains in use today. For version 7 of Internet Explorer, Microsoft made significant changes to the Trident layout engine to improve compliance with web standards and add support for new technologies. Despite these changes, Trident remains significantly less compliant than competing layout engines Gecko, Presto and WebCore.
Presto is the name of the current (Opera 9 series) layout engine for the Opera web browser developed by Opera Software. It was first released (following several public betas and technical previews) on January 28, 2003 in Opera 7.0 for Windows. Presto replaced the Elektra engine used in versions 4–6 of Opera. Presto differs from Elektra in that it is dynamic: the page or parts of it can be re-rendered in response to DOM and script events. The Presto layout engine is only available as a part of Opera browser or related products. The source or binary (DLL) forms of the engine are not publicly available. Subsequent releases have seen a number of bugs fixed and optimizations to improve the speed of the ECMAScript (”JavaScript“) engine.
Tasman is the name of the layout engine introduced with version 5 of Internet Explorer for Mac. Tasman was an attempt to improve support for web standards, as defined by the World Wide Web Consortium. At the time of its release, Tasman was seen as the layout engine with the best support for web standards such as HTML and CSS. Unfortunately, MSIE for Mac is no longer supported, but newer versions of Tasman are incorporated in some other current Microsoft products.
Cheers!
![]()
Tags: browsers, css, gecko, html, mac, mozilla, msie, opera, safari, standards, webkit, windows
Posted in WebStandards, Work | No Comments »
Sunday, October 21st, 2007
A colleague asked me about my solution for this just the other day, here’s the quick solution.
- Add a CSS class attribute to the items. Assuming they are <div>’s for header and footer, they would look like my example below, but you can add the ‘no-print’ class to anything you don’t want printed.
- Add a stylesheet with media=”print” to change the visibility and/or display attributes of that class.
- With a little more work, you could add a ‘no-screen’ solution too… this would be advantageous in cases where you may need to mask an account number or SSN.
<html>
<head>
<title>Example</title>
<link media=”print” href=”print.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<div class=”no-print”>This is your header</div>
<div>this is the body</div>
<div class=”no-print”>this is your footer</div>
</body>
</html>
print.css could then contain:
.no-print { display:none; }
Cheers!
![]()
Tags: block, browser, css, html, prevent, preventing, print, printing, section
Posted in WebStandards, Work | No Comments »