CSS at the Top
CSS at the Top
|
|
Example 2 – CSS at the Top. Current time: 18:42:14 … Try Example 3 – CSS at the Top Using @import to see why using the LINK tag is …
Similar Posts
- You want to offer a “stylish” low-contrast and an easy-to-read high-contrast version of your site.
- You have many low-vision readers and want to give them easy access to a customized stylesheet with a larger typeface.
- Your site is schizophrenic and you want to be able to change the look quickly.
CSS at the Top
Current time: 23:00:57. In this example the stylesheet’s LINK tag is in the document’s HEAD. In IE this makes the page render more quickly, specifically when:CSS at the Bottom
Make sure to view this page in IE to see the blank white screen problem. Current time: 06:38:23. In this example the stylesheet’s LINK tag is included at the bottom of the document …CSS Outline View
The CSS Outline View presents the import declarations of other stylesheet files and all the selectors defined in the current CSS document.SlickMap CSS Lets You Create Beautiful Visual Site Maps Easily
Bored with the same old uninspiring, list-based sitemaps? If you’re like me, most likely you will find that creating better looking sitemaps can be quite time consuming. Thus, we end up having to settle for text-based unordered lists that look nothing like a map.
Well well well, worry not my friends, for now you can have a very beautiful and visual site map with nothing more than your standard unordered list and some CSS magic. Thanks to the efforts of Matt Everson of Astuteo, LLC, who released for public consumption what they call SlickMap CSS.
SlickMap CSS is “a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.”
The first thing that really impressed me with SlickMap was the way data is visualized. The arrangment, grouping, and color coding of data makes it very easy to identify and find relevant data. The “Home link” is color blue and found at the top left most corner, immediately followed by the “Main links”, also colored blue. Level 2 and level 3 links can be found below them, each level having its own color, with a connector leading to each link. “Utility links” are grouped at the top right corner, separate from the main map.
What’s even more amazing about SlickMap is that everything is implemented in pure CSS. There is not a single line of JavaScript to be found anywhere. It’s also very easy to implement. Simply create an HTML file with an unordered set of links and import the slickmap.css file. Couple this up with an online site map tool like WriteMaps and you should be all set to rock and roll.
It supports most standards-compliant browsers, which means Safari, Firefox, and Opera. Sorry, IE but no love for you.
In the README file:
SlickMap CSS was created for web designers, and such was tested and developed for use with Safari, Firefox, Opera, and other standards-compliant browsers. Because of that, current versions of Internet Explorer (and probably IE versions long into the future) might look like sh*t.
The only downside I could think of right now is actually a strength in itself. While those large boxes would work for small to medium websites with a fairly standard site map layout like the one Astuteo has, it might do very well for larger websites with hundreds of links on their site maps. But then again there are methods to optimize and trim down those gigantic things.
It is a very well thought out and solid demonstration of the power of CSS, and for this reason I raise my glass and give my kudos to Matt Everson and the folks at Astuteo. Well done guys!
pixelspread: CSS Drop Down Menu
note: this is an exercise, not the perfect drop down menu. 98 css. Chris Rodgers … I wrote an article on pure CSS dropdown menus: link. Examples: link. link …Možné způsoby externího připojení CSS stylu
style type=”text/css”> @import url(kostra.css) screen;A List Apart: Articles: Flexible Layouts with CSS Positioning
Need to spend less time on CSS hacking and more time on design? Dug Falby shares techniques for practical grid-building with CSS positioning.Huge time saver: Automatic inline CSS generation – Blog – Campaign Monitor
Huge time saver: Automatic inline CSS generation. Published February 20, … The problem is, adding that CSS inline is fiddly and takes a long time, not to …A Simple jQuery Stylesheet Switcher
There are lots of reasons you might want to offer your users more than one CSS file for your website:
Whatever the reason, it’s amazingly easy to create a function that swaps between multiple stylesheets using jQuery.
The first step of course is to build several different CSS files, which we’ll then swap between. Once that is done, we can dive into the XHTML and jQuery that makes the magic happen.
The XHTML
First, we need to create a set of links that will allow the user to swap between CSS files. You can make this as simple or as fancy as you’d like. For the sake of brevity, my links are simple:
<ul id="nav"> <li><a href="#" rel="/path/to/style1.css">Default CSS</a></li> <li><a href="#" rel="/path/to/style2.css">Larger Text</a></li> <li><a href="#" rel="/path/to/style3.css">Something Different</a></li> </ul>
Here I have three links, each with a “rel” attribute indicating which CSS file the link will load. Technically, I could have just as easily put this information in the “href” attribute, but I didn’t want to for one specific reason: if the user has JavaScript disabled and the CSS file is listed in the href, then clicking the link will send the user to the CSS file directly (not loading it like we intended). But our way, if JS is disabled, the user gets nothing at all: which is certainly preferable to the less savory alternative.
The jQuery
Like I promised, the jQuery is really simple:
$(document).ready(function() {
$("#nav li a").click(function() {
$("link").attr("href",$(this).attr('rel'));
return false;
});
});
This function waits until the document is loaded (generally an important step when interacting with the DOM), then attaches a click function to each of our nav anchors. The function basically says, “when someone clicks on this link, replace the link (stylesheet) tag’s href attribute with the contents of this link’s rel attribute.” The “return false” at the end just stops the browser from trying to follow the link.
Of course, you might have to get more detailed if you have more than one link tag, for example, but that’s easily done by giving the link tag a class (”changeme,” for argument’s sake), and writing something like this:
$("link.changeme").attr("href",$(this).attr('rel'));
And while this stylesheet switcher is already complete, we might want to give it some memory: after all, your users might get annoyed if they have to switch their styles back to their preferences every time they visit your site. For that, we’ll need to set a cookie. And to make that easier, I’ll use the jQuery cookie plugin (which I’ve talked about previously when building a popout ad).
With the plugin loaded, we can modify our jQuery thusly:
$(document).ready(function() {
if($.cookie("css")) {
$("link").attr("href",$.cookie("css"));
}
$("#nav li a").click(function() {
$("link").attr("href",$(this).attr('rel'));
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
});
Now we have two statements. The first one checks as soon as the page is done loading to see if a cookie called “css” has been set. If so, it sets the stylesheet to be the one indicated in that cookie. Otherwise, it does nothing.
Our click function is much the same, except after we set the stylesheet, we also set a cookie. This cookie doesn’t expire for an entire year (and each time the user changes their stylesheet preferences, it would reset this timer), giving them a good 365 of CSS bliss.
Fine Tuning
There is one minor annoyance with this stylesheet switcher: there’s generally a flash of the “default” CSS when the user loads the page. That’s because the script waits until the document is “ready” before switching the link’s href. There is a way around this: moving the first “if” statement outside of the document ready function, like so:
if($.cookie("css")) {
$("link").attr("href",$.cookie("css"));
}
$(document).ready(function() {
$("#nav li a").click(function() {
$("link").attr("href",$(this).attr('rel'));
$.cookie("css",$(this).attr('rel'), {expires: 365, path: '/'});
return false;
});
});
Generally speaking, you don’t want to run any jQuery until your document is ready. However, so long as your jQuery comes after your link tag in your document structure, like shown below, this shouldn’t be a major concern:
<link rel="stylesheet" type="text/css" href="style1.css" /> <script type="text/javascript" language="javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript" src="jquery.cookie.js"></script> <script>... your jQuery goes here...</script>
This means your jQuery will run before the document is done loading, and thus your link tag’s href will be swapped before your CSS has been applied. As I said before, it’s generally a bad idea to manipulate the DOM before document ready, but because we know the exact tag we want to manipulate and can place our jQuery below it in the DOM, we should be safe in this one specific instance.
Here’s an example if you would like to see this technique in action.
