Tag: css

Making HTML text unselectable with CSS

There are often circumstances where you do not want users to select certain text on your page in order to maintain a facade… rounded buttons for example.

In most browsers, this can be achieved using CSS (much of it proprietary below), For IE and Opera, you will need to use the unselectable expando property of the element you wish to be unselectable.

You can set this using an attribute in HTML:
<div id="foo" unselectable="on" class="unselectable">...</div>
<style type="text/css">
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>

Sadly this property isn’t inherited, meaning you have to put an attribute in the start tag of every element inside the

. If this is a problem, you could instead use JavaScript to do this recursively for an element’s descendants:

function makeUnselectable(node) {
if (node.nodeType == 1) {
node.unselectable = true;
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));

REFERENCES:

Replacing deprecated use of HTML ‘nobr’ tags and ‘nowrap’ attributes

It’s not uncommon to find yourself working on applications that were often build before the widespread adoption of CSS. Alongside legacy <table> based designs, the use of various mechanisms to prevent word-wrapping are often implemented.

I’ve found that the following allows for low-risk transition between technologies…

<style type="text/css">
table.nobr tr th, table tr.nobr th, table tr th.nobr, table thead.nobr tr td, table tbody.nobr tr td,
table.nobr tr td, table tr.nobr td, table tr td.nobr, table thead.nobr tr td, table tbody.nobr tr td,
.nobr {white-space:nowrap;}
</style>

With the above approach, you can apply class="nobr" to any element directly, for <table>‘s I’ve taken it a little further and allowed for the class to be set at various levels in the heirarchy to fill various needs.

robots-nocontent

SEO is always a tricky matter as it’s always changing, way back in 2007 Yahoo! added a means to ‘hide’ specific content on your page from it’s spider with the user of a CSS class that can be used anywhere on your page. True…. this can be abused, but is generally good to keep common content such as navigation and/or ads out of the index. Unfortunately, only Yahoo! supports this.

class="robots-nocontent"

Fix for Flash files ignoring z-index

Flash objects often interfere with your layering within your DHTML applications and appear above them in the DOM stacking order, standard CSS and HTML solutions do not have any impact. Fortunately there is a simple solution to this ‘problem’ thats been supported in all common browsers since MSIE4.

On <object>
<param name="wmode" value="transparent" />

In <embed ... wmode="transparent" >

REFERENCES:

MSIE Table styling of empty cells

This one had me stumped for some time, when a table contained either a <td></td> or <th></th> without content the cell would not be properly styled, often lacking borders. Traditionally the solution I used was to insure that all table cells had at least a single space within them so that they would be styled properly in MSIE.

There’s a simpler solution, the below CSS changes the default behavior so that the traditional ‘hack’ is no longer required:


table {
border-collapse:collapse;
empty-cells:show;
}

REFERENCES:

META Tag ‘MSThemeCompatible’

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" />

Setting this will disable theme support for the document. Some background on this, Windows XP (MSIE6) allows for the use of themes for the operating system to change the general color scheme of many elements.
As such, many HTML components (such as SELECT dropdowns, BUTTONS and INPUT fields ‘MAY’ also be effected if you don’t explicitly prevent it in your code.

There was some support for this in Mozilla Firefox builds for Windows, as such, while I’d normally recommend using a conditional comment, I’m torn in this case.

Cheers

NLS for CSS?

Okay, so this is a little odd. This does not effect the language or direction of the website, but instead is a measure to ensure proper encoding of the CSS file itself.

The browser will generally rely on the HTTP Headers to determine this value, but in cases where the server or application configuration does not, you can provide the equivalent in the file itself.

WARNING: This needs to be the first line of the .css file, before any spaces or comments.

Example:
@charset “UTF-8”;

Other common value:
@charset “ISO-8859-1”;

Reference:
http://www.w3.org/International/questions/qa-css-charset

Cheers!

Accessible alternative to NOSCRIPT

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!

CSS ‘id’ vs. ‘class’

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.

Browser Rendering Engines

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!