Tag Archives: css

Custom CSS Stylesheets for Small Screens

by stuporglue Posted on March 18, 2010

I’ve gotten a good handfull of visitors from EeePC related sites, so I assume that some visitors are coming on their EeePCs. I was playing with some other site layout issues at the same time anyways, so I decided to do a couple of things to make it easier on those with small screens.

Notice: This info is old and probably out of date. A better method of doing this probably exists. If it’s helpful, great, but please take it with a grain of salt.

Smart Chunking

The main reason this site doesn’t play well with small screens is because of the two sidebars. To get around this, I broke up the sidebar content into three different divs. The most important one is the navigation, the next most important is the Firefox button / Shirts by Me bar. The least important is the Google search, Bluehost ad and the google ads. The main body of content also got its own div.

I had initially had all this content at the top of the HTML. I decided that only the navigation should go at the top of the page. This benefits small screen users as well as the blind and those using text based browsers.

Super Style

The next thing I did was to create an alternative stylesheet. This stylesheet puts the navigation across the top horizontally, then displays the page contents across the whole width of the window. The other stuff just gets tacked onto the bottom. This same stylesheet should get used if the browser requests the ‘handheld’ media CSS file, or if a Firefox user goes to their View–>Page Style–>Small Screens menu item. The Small Screens menu item is actually my Small Screens CSS file.

Below is the CSS section of the <head> part of this site. Notice that there are two media=”screen” sections, but that the ‘freestyling.css’ file has a rel attribute of ‘alternative stylesheet’. This is the magic that makes it not load, but be present in the Firefox Page Style menu. I designate the same stylesheet for handhelds and for printing as well.

<lt;link id='maincss' rel="stylesheet" type="text/css" href="http://stuporglue.org/ohyesivegotstyle.css" media="screen" title="Default Styles"/>
<lt;link rel="alternate stylesheet" type="text/css" href="http://stuporglue.org/freestyling.css" media="screen" title="Small Screens" />
<lt;link rel="stylesheet" type="text/css" href="http://stuporglue.org/freestyling.css" media="handheld" title="Handheld Screens" />
<lt;link rel="stylesheet" type="text/css" href="http://stuporglue.org/freestyling.css" media="print" title="Print Media" />

Cookies anyone?

Now I create a check to see if the user has a cookie installed on their computer from this website. The cookie simply has a key-value pair of ‘smallscreen’=>1|0. When the page is sent to the user, a check is made to see if a cookie is set. If it is set and it is 1, the CSS for small screen is sent, otherwise the normal CSS is sent. I also created a simple form that will let the user set or unset the cookie.

Javamatic

The last step to making this site more readable to small screen visitors is to automatically switch over to the small screen CSS style if their browser is too small. This little snippet of code will load the freestyling.css file if the screen width is 800 pixels or less. Sorry this is JavaScript and not something serverside like PHP.

In the case that the user has said ‘smallscreen=0′ in their cookie, I send them the large screen CSS and don’t print out the JavaScript at all

if(screen.width <= 800){
    document.getElementById('maincss').href = 'freestyling.css';
}
Posted in Programming, Projects | Tagged , | Leave a comment

Giving Users Style Choice

by stuporglue Posted on March 14, 2010

Sometimes your site’s style doesn’t meet the needs of all your visitors. And once in a great while you get a chance to see what your users are seeing and make a change to benefit them.

Having recently recieved an Eee PC for graduation, I suddenly saw the world of 800×640 resolution and understood that fixed width dual sidebars was a BAD design decision.

Small Screen User: What? Only see one word per line? Preposterous!

My site should now be more friendly to small screens because of several changes I made to the CSS. The same changes should also benefit users with screen readers and text based browsers. The method should also work with users who have JavaScript disabled. If you’d like to use CSS to change your site to be more friendly, here’s what I did.

Organize Your Content

Break your content up into divs. Organize those divs so that the most important content is at the top of the HTML and the least important is at the bottom.

Organizing your content this way will make it easier to use CSS, make it naturally more friendly for text based browsers and screen readers. On my site the first div has the page navigation. The second has the content. The ads, search box and my doodles all are added at the very end of the HTML.

Use CSS to put the divs where you want them. If you don’t know CSS, then it’s time to learn!

Provide alternative styles

Firefox and other good browsers make it easy to switch between provided stylesheets. Most of you will be here with Firefox. In your Firefox menu go to ‘View’ –> ‘Page Style’ –> and choose a style!

Add these alternative styles with a line of code in the <head> like that below. The key is the rel=”alternative stylesheet” part.

<link rel="alternate stylesheet" type="text/css" href="http://stuporglue.org/freestyling.css" media="screen" title="Small Screens" />

You can offer all sorts of different styles. Ideas include a) Alternative themes, b) high contrast version, c) small screen version, d) no images version.

Automatically Pick The Right Style

Sadly, browsers don’t send window or screen size to the server. JavaScript knows though! Since this is the case, we’re going to need to use client side scripting to change stylesheets automatically.

The first part of this step is to give the default CSS line (in your <head> section) an id so that JavaScript can get a handle on it more easily. Then we use the screen.width value to determine if we’re going to switch the CSS on the user. My code goes a little something like this:

<script type='text/javascript'> if(screen.width <= 800){ document.getElementById('maincss').href = 'freestyling.css'; }</script>

The above snippet will realize that the user has a small screen and change the CSS to a small-screen friendly version

Of course this part won’t work for visitors who have JavaScript disabled, which is why we’re going to add one more piece to the puzzle so that they too can benefit from alternative stylesheets.

Give The User Choices

Your visitors know what size works best for them, so give them a choice. You may notice a new menu item on the side of this page which gives the options “Small Screen CSS”, “Normal CSS”, “Default CSS”. These links call change-css.php with different parameters, causing a cookie to be set or unset.

In the head section include (you ARE using includes on your pages, aren’t you?) we now add a little bit of code to check if there is a cookie, and if so to use the style sheet specified by the cookie

<?php
if($_COOKIE['screensize'] == 'normal'){
    print "<link id='maincss' rel='stylesheet' type='text/css' href='http://stuporglue.org/ohyesivegotstyle.css' media='screen' title='Default (Big Styles)'/>";
}else if($_COOKIE['screensize'] == 'small'){
    print "<link id='maincss' rel='stylesheet' type='text/css' href='http://stuporglue.org/freestyling.css' media='screen' title='Default (Small Styles)'/>";
}
else
{
    print "<link id='maincss' rel='stylesheet' type='text/css' href='http://stuporglue.org/ohyesivegotstyle.css' media='screen' title='Default Styles'/>\n";
    print "<script type='text/javascript'> if(screen.width <= 800){ document.getElementById('maincss').href = 'freestyling.css'; } </script>\n";
}
?>

Note that I only print the JavaScript in the default case. This prevents us from changing the CSS stylesheet automatically if they’ve selected one already.

Cookie Setting Code

This is the code I use to set the cookies

<?php

// Check if they have the GET parameter we are expecting
if($_GET['screencookie']){
    switch($_GET['screencookie']){
    case('normal'):
	// Set the normal CSS cookie
	setcookie('screensize','normal',time()+60*60*24*30,'/');
	break;
    case('small'):
	// Set the small CSS cookie
	setcookie('screensize','small',time()+60*60*24*30,'/');
	break;
    case('ihatecookies'):
	// Remove the cookie
	setcookie('screensize','removing',-1,'/');
	break;
    }
}

//if they're coming from one of my pages already, send them back where they came from.
if(strpos($HTTP_REFERER,'http://stuporglue.org') === 0){
    $place = "Location: $HTTP_REFERER";
    header($place);
}
else {
    // If for some reason they got linked to the change-css.php
    // page without already being on the site, send them to the homepage.
    header('Location: http://stuporglue.org');
}
?>
Posted in Programming, Projects | Tagged , , | Leave a comment

CSS color extracter

by stuporglue Posted on March 14, 2010

This is one of the reasons I love Ruby. I wrote some code that would take a CSS file and print out the unique hex colors, and it was about 10 lines long. I then realized that if I had been thinking in Ruby, I could do it in just one line.

This page is OLD and probably contains errors, out of date information, security flaws or other problems. I am keeping it around because it might be helpful to someone.

File.readlines(ARGV[0]).to_s.downcase.scan(/#[0-9a-f]{6}/).uniq.sort.each {|one| puts one} if (ARGV[0] != nil)

Put that in a Ruby file, and run it with a parameter of the CSS file to parse, and it will print each unique color on a single line.

Expanding on that work, we can now create Gimp palettes for use in a variety of Open Source graphics programs, including Inkscape and The Gimp. Here is a program that will do just that.
Download it here

#!/usr/bin/env ruby
# Create a gimp palette from a CSS file's unique hex colors
# Weakenesses: Doesn't account for 3 digit colors (ie. #abc;)
# or for named colors
#
# By Michael Moore stuporglue@gmail.com
# Released to Public Domain April 5, 2007
if (ARGV[0] != nil)
    gimpstring = "GIMP Palette\nName: "
    if(ARGV[1] != nil)
	gimpstring << ARGV[1]
    else
	gimpstring << ARGV[0]
    end
    gimpstring << "\nColumns: 0\n#"
    # This could have problems if you have ids that are only hex chars for the first 6 values
    # eg. if this were your CSS
    #
    #	#abc123nurserystyle {
    # 		background-color: green;
    #	}
    #
    #	the color #abc123 would be added to the palette

    File.readlines(ARGV[0]).to_s.downcase.scan(/#[0-9a-f]{6}/).uniq.sort.each do |onecolor|
	colorparts = onecolor.scan(/[0-9a-f]{2}/)
	gimpstring << "\n" + colorparts[0].hex.to_s.rjust(3) + " " + colorparts[1].hex.to_s.rjust(3) + " " + colorparts[2].hex.to_s.rjust(3) + "\tUntitled"
    end
    print gimpstring
else
    puts ""
    puts "CSS to Gimp Palette"
    puts "Use 6-digit hex colors from a CSS file to create a Gimp palette (gpl) file"
    puts ""
    puts "USAGE: csstogpl.rb cssfile [Palette Name]"
    puts "If Palette Name is ommited, the CSS file's name will be used instead"
    puts ""
    puts "Note: csstogpl does not write to a file, it prints to stdout."
    puts "To save to a file, use redirection. eg."
    puts "csstogpl.rb style.css MyAwesomeColorScheme > MACS.gpl"
    puts ""
end
Posted in Programming, Projects | Tagged , , , , | Leave a comment