Home > CSS Help > 02 Tables vs CSS: 15 points to consider when choosing between a …

02 Tables vs CSS: 15 points to consider when choosing between a …

March 19th, 2009

02 Tables vs CSS: 15 points to consider when choosing between a …



… cons when choosing between Tables or CSS Tables for your web pages. Examines … ( Anchor tags can take up a lot on clickable lists like search results. …

Source


Similar Posts

    webdesign SEO resource and news – Remote Linking

    … is what I call it when a single anchor link has multiple clickable areas in different locations. It … Category: CSS | Tags: remote linking anchor link css …

    Source

    basic anchor tags in CSS [Archive] – Dynamic Drive Forums

    [Archive] basic anchor tags in CSS Dynamic Drive scripts help … however when my CSS has basic anchor tags in it, these overwrite the STYLES for …

    Source

    a:link : Anchor class " Basic Tags " HTML / CSS

    HTML / CSS ” Basic Tags ” Anchor class. a:link … Three level nesting for an anchor with id. 18. background image, repeat and position for anchor link hover. 19. …

    Source

    Anchor class " Basic Tags " HTML / CSS

    HTML / CSS ” Basic Tags ” Anchor class. 1. Pseudo-class Selectors for anchor. 2. a:link … Three level nesting for an anchor with id. 19. …

    Source

    CSS Hierarchy – Anchor tags within named elements – ASP Free

    CSS Hierarchy – Anchor tags within named elements- HTML, JavaScript And CSS Help. … can I specify anchor classes that will only work within that DIV without …

    Source

    SkillShare Forum – CSS Beauty – Anchor within web loads page without css

    CSS will load if I navigate to the page through my general anchor tags (i.e. <a … The anchor works but the CSS gets taken out of the rendering. CommentAuthorvarland …

    Source

    Adding CSS IDs and anchor name fragment to a node title in teaser lists …

    Adding CSS IDs and anchor name fragment to a node title in teaser lists. Average: … not put an anchor name, mark, fragment, or CSS identification element for node …

    Source

    Text Replacement Roundup: The Pros and Cons of SIFR, Cufon, Typeface.js, and FLIR

    Those of you who have explored rich typography solutions for web development should be very familiar with the different techniques floating around the Internet. Until majority of the population uses browsers that support CSS3, and until commercial font licensing issues allow use of the @font-face rule to become a norm, many resort to these font embedding techniques.

    The thing with non-standard font embedding techniques is that they mostly rely on JavaScript and sometimes Flash or PHP to render text in whatever custom font is specified. Thus, choosing the right solution for a web project can become tricky. This article aims to compare them by listing the pros and cons of each technique.

    Scalable Inman Flash Replacement (sIFR) / sIFR 3

    Probably one of the first full-blown text replacement solutions, SIFR uses a combination of JavaScript, CSS, and Flash to render custom fonts.

    Pros:

    • Fully accessible to screen readers and assistive technology
    • Partially selectable text (cannot select surrounding elements)
    • jQuery integration
    • Anti-aliasing results in crisp font rendering
    • Flash-based font embedding is generally an allowable practice by most font foundries
    • Easy to add text effects such as shadows in Flash

    Cons:

    • Requires Flash
    • CPU and memory intensive
    • Font license restrictions can be difficult to set up (e.g. Flash loading needs to be locked to your domain)
    • Can be tricky to set up
    • Embedded fonts cannot be printed

    Cufon

    Cufón aims to become a worthy alternative to sIFR, which despite its merits still remains painfully tricky to set up and use.
    Pros:

    • Easy to set up
    • Does not require Flash
    • Fastest loading and processing time (according to this presentation)

    Cons:

    • Inability to highlight and copy/paste text
    • License issues prevent many fonts from being legally embedded
    • Does not support justified text alignment
    • Hover state for elements other than links might result to unpredictable results
    • Requires extra JavaScript to prevent FOUC on IE7

    Typeface.js

    Typeface.js is similar to Cufon, using a JavaScript engine to render fonts on a browser using canvas or VML.

    Pros:

    • Easy to set up
    • Does not require Flash
    • Fast loading and processing time

    Cons:

    • Fonts are only selectable in browsers that support <canvas>
    • Hover state is not supported, but a workaround that requires extra code is available
    • License issues prevent many fonts from being legally embedded
    • Long loading times in IE
    • Only supports TTF (does not support .otf, PFB, and postscript fonts)
    • Requires extra JavaScript to prevent FOUC on IE7
    • Has spacing issues, according to some people

    Facelift Image Replacement (FLIR)

    Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that uses JavaScript, PHP and the GD library to dynamically generates image representations of text that use custom fonts.
    Pros:

    • Does not require Flash or JavaScript
    • Fonts are rendered as an image and does not violate font licensing terms
    • Many text effects available thanks to Imagemagick

    Cons:

    • Inability to highlight and copy/paste text
    • Can be painful to set up
    • Requires a web server with PHP and the GD library enabled
    • Finer details of fonts are not rendered very well by the GD library
    • Takes up additional server resources to process (bandwidth and CPU)

    The good thing about these techniques is that they all take into account things like accessibility, SEO readiness, and browser support. These are all huge factors in web development today. For Internet Explorer users, IE6 is supported at least, and for non-supported browsers, thankfully every one of them degrades gracefully into your standard HTML rendered text.

    In conclusion, every one of these techniques has its own set of advantages and disadvantages. sIFR is the oldest and most “proven method”, however it relies on both Flash and JavaScript thus taking a hit on performance. FLIR uses the old school technique of replacing text with images and even offers text effects. However, it is hardest to set up and requires a web server with PHP and the GD library enabled.

    Typeface and Cufon are the most promising beign the easiest to setup. On the other hand they are both plagued with licensing issues and lack of ability to select text, which for many can be a deal breaker. This appears to be changing though, as Type Select builds on top of typface.js and promises text selection functionality. Still, it is a relatively new player and is also plagued by limitations such as lack of support in IE and no support for :hover and line breaks.

    Share

    Read More

    Firescope Firefox Add-on for Firebug

    Fans of the swiss army knife of web development Firebug will be happy to hear that this wonderful Firefox add-on has added another blade to its arsenal. With the help of the Firescope add-on, it can now provide CSS and HTML reference in a snap. Just right-click on any tag and click on the context menu to perform a lookup. The tool appears to have been developed by the web gurus over at SitePoint, so tool has links to further information on the SitePoint Reference web site.

    The tool is also searchable. You can:

    … search for HTML elements, HTML attributes, or CSS properties (or any combination). The search happens live as you type, so usually you’ll only have to type one or two letters to get the results you want.

    Check out the screenshots:

    Share

    Read More

    Making CSS rollover buttons

    In this how-to, we’ll show you how to create easy, search-engine-friendly rollovers, using nothing but HTML, CSS and images. No JavaScript or IMG tags in sight!

    Source