Advanced CSS Design Resources - last-child.com » CSS http://www.last-child.com CSS Toys for Professional Web Developers Thu, 08 Jul 2010 16:59:14 +0000 en hourly 1 http://wordpress.org/?v=3.0 A quick CSS3 sibling test with the video tag http://www.last-child.com/css3-sibling-with-video-tag/ http://www.last-child.com/css3-sibling-with-video-tag/#comments Tue, 15 Jun 2010 15:56:31 +0000 Ted http://www.last-child.com/?p=240 <video>...</video> <p>...</p> </li> I wanted the paragraph to appear when the video is [...]]]> I am working on a little widget that uses the html5 video tag on one of my test sites: Fyvr.net.
I wanted to display related information when the video is playing. The sibling selector makes this easy.

Here’s the basic markup


<li>
<video>...</video>
<p>...</p>
</li>

I wanted the paragraph to appear when the video is selected. So here’s the simple CSS


section#videolist li {
	position:relative;
}
section#videolist li p {
	display:none;
	position:absolute;
	bottom:-100px;
	left:0;
}
section#videolist li video:focus+p {
	display:block;
}

The sibling selector (+) is telling the browser to display the paragraph as block when its video brother has focus. This is a rough test. There could be some accessibility issues and I’ll need to test this out. Obviously this will not work in Internet Explorer.

]]> http://www.last-child.com/css3-sibling-with-video-tag/feed/ 1 YUI 3.0 Gallery now includes modernizr functionality http://www.last-child.com/yui-3-0-modernizr-function/ http://www.last-child.com/yui-3-0-modernizr-function/#comments Tue, 25 May 2010 22:51:14 +0000 Ted http://www.last-child.com/?p=229 Yahoo! User Interface Library (YUI)Are you working on an HTML5 project and using the latest YUI library from Yahoo? If so, you’ll be happy to know that you can use the modernizr functionality within the YUI3 code.

This extension was added to the YUI Gallery by Pradhap Natarajan: Modernizr (gallery-modernizr).

This is a wrapper for Modernizr library that is used to detect support for many HTML5 & CSS3 features on a browser. More documentation here – http://www.modernizr.com/docs/ Please note that the module does not add the Modernizr object to the global namespace. Instead it will be local to the YUI instance.

Modernizr YUI Library

Modernizr was created to make HTML5 development consistent. It gives hooks for JS and CSS to support the advanced features.

Related articles by Zemanta

]]> http://www.last-child.com/yui-3-0-modernizr-function/feed/ 0 Dive into HTML5 should be everyone’s intro to the standard http://www.last-child.com/dive-into-html5/ http://www.last-child.com/dive-into-html5/#comments Tue, 20 Apr 2010 22:30:50 +0000 Ted http://www.last-child.com/?p=224 I just found out about the Dive Into HTML5 tutorial. It’s downright amazing. I wish all specs were so carefully described. Don’t miss the first chapter on the history of standards creation. It gives you a good understanding of why the HTML standards are quirky and why HTML5 is progressing the way it is.

I especially like the way they test your browser for its ability to handle the various components you are reading about. Take an hour or so to go through this tutorial. It’s the best read you’ll have for the week.

Another good tutorial is The Best HTML5 Slides Ever, but you’ll need to view it in Safari. It doesn’t work well in the standard Firefox and forget about IE.

Related articles by Zemanta

]]> http://www.last-child.com/dive-into-html5/feed/ 1 HTML5 Helpful Links http://www.last-child.com/html5-helpful-links/ http://www.last-child.com/html5-helpful-links/#comments Sat, 03 Apr 2010 18:55:45 +0000 Ted http://www.last-child.com/?p=216 I’m starting to hack away at HTML5 and I’m finding that I need to start bookmarking more and more pages. There are lots of good resources out there. Here are a few:

Related articles by Zemanta

]]> http://www.last-child.com/html5-helpful-links/feed/ 0 HTML5 – quick notes from The Chronicles of Web Standard III – The Voyage of the HTML5 http://www.last-child.com/html5-quick-notes/ http://www.last-child.com/html5-quick-notes/#comments Thu, 01 Apr 2010 16:43:27 +0000 Ted http://www.last-child.com/?p=207 I went to the The Chronicles of Web Standard III – The Voyage of the HTML5 presentation by Silicon Valley Web Builder last night. Here are some quick notes I took before my battery died.
HTML5
Please note: I am far from an expert on HTML5 and welcome any comments and/or corrections to the following notes.

The speakers were

  • Ben Galbraith, Co-founder at Ajaxian.com
  • Brad Neuberg, Developer at Google
  • Chet Haase, Adobe Flex SDK team member
  • Michael Carter, Founder at Orbited Project & Official Contributor for W3C HTML5

First off, HTML5 was defined as not just an HTML4+ spec. It also includes all of the advances since HTML4.0. These include:

  • CSS3
  • webGL
  • geolocation
  • web workers
  • web storage
  • web sockets
  • canvas, SVG

Canvas vs. SVG

You can roughly think of these as Adobe Flash replacements.

Both canvas and SVG can be used to build dynamic images, charts, animation, and more. Canvas has more adoption at this point and is faster. However, the canvas is built and then keeps no memory of the objects it contains. SVG is more structured and knows what it contains. These sub objects can be further manipulated. SVG has the potential of being much more powerful than canvas in the long run. Microsoft‘s IE9 has demonstrated great potential with SVG.

CSS3 Advancements

There’s been an extended argument about where CSS or JS should be used on a web site. Some developers argue CSS shouldn’t be used for interactivity, such as drop down menus. However, the CSS transformations available in CSS3 are going to throw a major monkey wrench into this argument. They are blurring the boundaries and can do a much better job than javaScript.

Apple and Safari have pushed the development of transformations as they introduced the animation of pages when you switch an iPhone from portrait to landscape mode. This is just the tip of the iceberg. An example last night showed a CSS only version of itunes’ coverflow animation. Check out the CSS3 3D transformations.

Web Workers

Web workers technology should solve an existing problem with javaScript functions that run for extended periods. One example was a JS transformation of an image. It rotated the image and added reflections. However, the image would stop rotating when a user clicked on a button to add/change the functionality. Web Workers allows these functions to operate consistently.

There was another example with a movie of a guy holding a piece of cardboard and rotating it randomly. The user could click on various movies and watch them appear on the cardboard in the movie.

You can participate

One thing mentioned often in the meeting was the open structure for developing the specifications. Anyone can participate by joining the mailing lists, irc (irc.freenode whatwg), and making requests, suggestions, and comments.

They are especially interested in knowing what problems you have that are not solved by the existing specs. What changes would particularly affect you and how would you solve the problem.

For instance, I asked if the phone manufacturers are looking at the HTML5 web forms and using the new input types to intelligently autofill forms. For instance, they know an input is asking for a phone number, should a phone insert your number automatically? What about your other contact information?

Currently, this interaction is not in the spec. This is the kind of comment/suggestion they need to make the final specifications.

Related articles by Zemanta

]]> http://www.last-child.com/html5-quick-notes/feed/ 0 HTML5 Resource: HTML5 Doctor http://www.last-child.com/html5-resource-html5-doctor/ http://www.last-child.com/html5-resource-html5-doctor/#comments Wed, 31 Mar 2010 17:54:25 +0000 Ted http://www.last-child.com/?p=204 I used to think HTML5 was just a pipe dream; something that was a nice idea but had no legs. However, the recent advancement of smart phones makes this the perfect approach for building web-based phone apps. Hence, my interest now in joining the HTML5 game.

There’s a great resource for those like me starting to dip their toes into the HTML5 pool: HTML5 Doctor. This web site is a collaboration between some of the biggest and brightest stars of web development: Rich Clark, Bruce Lawson, Jack Osborne, Mike Robinson, Remy Sharp, Tom Leadbetter, and Oli Studholme.

The article How to use HTML5 in your client work right now has some interesting suggestions on adding HTML5 functionality to your existing projects. This works hand in hand with using advanced CSS3 rules. Don’t break IE6, but start letting the advanced browsers and platforms give your users more functionality.

Here’s a summary of HTML5 bits that you can begin using today.

  • Use the HTML5 doctype and character set.
  • Use the simplified <script> and <style> elements.
  • Use semantic class names that are representative of the new HTML5 elements. See @boblet’s cheat sheet for more on this.
  • Use block level links.
  • Use the new form attributes and input types.
  • Use the new <audio> and <video> media elements (but make sure they degrade gracefully).
  • Plug the gaps with something like Modernizr.

How to use HTML5 in your client work right now – Richard Clark

Related articles by Zemanta

]]> http://www.last-child.com/html5-resource-html5-doctor/feed/ 0 Make a niche search engine with Yahoo! BOSS http://www.last-child.com/niche-search-engine-yahoo-boss/ http://www.last-child.com/niche-search-engine-yahoo-boss/#comments Mon, 03 Nov 2008 12:05:26 +0000 Ted http://www.last-child.com/?p=163 The Yahoo! Developer Network blog just published an article I wrote about Yahoo! BOSS. It discusses how to use the search filters and query attributes with the BOSS API.

I’ve used these methods on V3GGIE.com, a vegetarian search engine and will be launching a new niche search engine in the next few weeks.
Yahoo! BOSS plus your ideas make a unique search experience

Update

Insider Food badge for featured expertsI’ve just taken the covers off my latest search engine project. Insider Food is a regional search engine powered by local bloggers, chefs, and restaurant fanatics.

It’s a wee bit slow right now due to a multitude of API requests to Yahoo! Boss, Yahoo! Pipes, Flickr, Amazon, and more. Look for some upcoming posts about the construction of the site. Hopefully I can even describe caching and threading. Once somebody teaches me :) .

Related articles by Zemanta

]]> http://www.last-child.com/niche-search-engine-yahoo-boss/feed/ 0 CSS3 Attribute Selector Presentation http://www.last-child.com/css3-attribute-selectors/ http://www.last-child.com/css3-attribute-selectors/#comments Thu, 09 Oct 2008 20:46:11 +0000 Ted http://www.last-child.com/?p=162 During the fog of a summer cold and pressing deadlines… I gave a presentation today at the Yahoo! Front End Engineering Summit about CSS3 Attribute Selectors. The presentation briefly touched on some of my previous posts on this site as well as a few new concepts and ideas.

Here is the full presentation (HTML): CSS3 Attribute Lovin’. Feel free to copy, share, or do whatever you like with it.

I’ll post some more information on the new topics soon. Right now I’ve got to get back to my massive list of outstanding bugs on my project.

Related articles by Zemanta
]]> http://www.last-child.com/css3-attribute-selectors/feed/ 0 Add Pagination to your Yahoo! BOSS search engine http://www.last-child.com/pagination-boss-search-engine/ http://www.last-child.com/pagination-boss-search-engine/#comments Fri, 12 Sep 2008 15:07:52 +0000 Ted http://www.last-child.com/?p=161 Search pagination exampleYahoo’s BOSS search API makes it easy for you to create a customized search engine. Yahoo! also has a Design Pattern lLibrary to save time designing your pages. They’ve put a lot of effort into creating the best user experience for search pagination.

Pagination guidelines

Here’s a sample of the Design Library’s ideas for search pagination.

  • Display the navigation controls as a row of links.
  • Present links in the following order: ‘Prev’, page links, ‘Next’.
  • Display a left arrow after the label ‘Prev’.
  • Display a right arrow before the label ‘Next’.
  • Make the arrow(s) clickable.
  • The page links should contain a maximum set of 10 page links. If fewer pages of results exist, only show page links for the available pages.
  • When on pages 1-6, the page links should always start at ’1′.

Search Pagination

The rationale for these rules is also interesting:

  • Displaying arrow graphics helps differentiate the links and provides larger click targets.
  • Disabled controls add little value in this context since
    • These links often appear blow the fold.
    • The first page of results makes up the vast majority of pageviews. Displaying a disabled “previous” control on all of these is of little added value.
    • Although a “First” link has value, it competes with the functionality presented in the random-access links.
    • The “Last” link is of little value as the results are sorted by relevance. This is is also problematic since the total number of results (and therefore, the last result) may not be known.

Add this pagination style to your search engine

See the final result on V3GGIE.com: Vegetarian Enchiladas Recipes

Most PHP pagination tutorials assume you are pulling content from a database. Ascanio Colonna created a good tutorial on building pagination with PHP that is agnostic to the data source. I’ve taken his code and modified it to match the Yahoo Design Pattern. I’ve also added the suggested YUI Module markup to stay consistent with the YUI Grids and any future YUI javascript.

The pagination.php file includes a function that creates the module. You’ll need to call this function from your results page with a series of parameters. These are easy to populate from the BOSS interface. It’s worth noting that I am ignoring the BOSS next/last page nodes in the web service and prefer to build my own urls.

The Pagination Code

Lets’ start by looking at the code inside your results.php file. This will call the pagination function and pass the desired parameters.


if(!empty($searchQuery))
{
require '/include/pagination.php';
if(isset($_REQUEST['page'])) {
$page = $_REQUEST['page'];
} else {
$page = '1';
}
$limit = $count;
$targetpage = 'results.php';
$pagestring = '?page=';
$summary_name = 'articles';
$placement = 'summary';
// start pagination
echo getPaginationString($page, $totalhits, $limit, $targetpage, $pagestring, $summary_name, $placement);
}

Here’s what you are working with:

require ‘/include/pagination.php’
Where does the pagination file sit on your server
$page logic
First look to see if there is page=x in the url. If so, $page = x, if not, you are on page 1.
$limit
How many results will appear on the page
$targetpage
what is the name of your results page? index.php, results.php?
$pagestring
I tried to minimize this to ?p= but couldn’t track down why it didn’t work. I’ve left it at the default ?page=…
$summary_name
This is what appears in the text “xxx (summary_name) results. This is not used in the Yahoo Design Library
$placement
You’ll probably want to use summary. This function also allows “footer” for a simplified output
echo getPaginationString(…)
Send the information to the function and display the results in the page.

Important Update!

The original code I posted had a serious security flaw. You should never output user’s input directly into your page. I had something like this href=”?query=$_REQUEST['query']“. This allows all sorts of Cross Site Scripting attacks. You must urlencode any text that comes from a user. This is safe: urlencode($_REQUEST['query']).

I apologize if anyone has used this code, as I wrote it on their site. They should immediately update the logic. -Ted

The pagination function

I have streamlined the original code from Asconio, as he was tying into pre-existing facebook styles. This code is for your unique web site. It’s also worth noting I use rewrite rules to make my search result page urls more friendly, i.e. /corn.html instead of /result.php?q=corn


//text strings in strings.php

function getPaginationString($page = 1, $totalitems, $limit = 15, $targetpage = '/', $pagestring = '?page=', $summary_name = 'items', $placement = 'summary',$safeQuery)
{

$countnum = '15';

// inurl or intitle
// it should only be three digits long, int, inu, or nox anything else could be a vulnerability
//int=intitle, inu=inurl, nox=no setting
if (isset($_REQUEST['inx']) && strlen($_REQUEST['inx']) == 3){
$inxv = $_REQUEST['inx'];
}
else {
$inxv = '';
}

// type of query
// request type should only be 2 chars, if not we are dealing with an xss attack
// type options: rc, lo, ve... these represent recipes, local, buzz for insider sites.
if (!empty($_REQUEST['t']) && strlen($_REQUEST['t']) <= 2) {
$tid = $_REQUEST['t'];
}
else{
$tid = 've';}
// count should only be a number. don't allow text for xss protection
if (!empty($_REQUEST['count'])) {
$countnum = number($_REQUEST['count']);
$limit = $countnum;
}
// DEFAULTS
$adjacents = 10;
//$targetpage = .'.html';
// VARS
if(substr($pagestring, 0, 1) != '?') $pagestring = '?' . $pagestring; // If query string is lacking start, add it
if(substr($pagestring, strlen($pagestring) - 5) != 'page=') $pagestring .= '&page='; // If query string is lacking page var, add it
$prev = $page - 1;
$next = $page + 1;
$firstpage = 1;
$lastpage = ceil($totalitems / $limit);
$fiop = ($limit * $page) - $limit + 1; //# of first item displayed in current page
$liop = min($limit * $page, $totalitems); //# of last item displayed in current page
$searchstring = "&t=$tid&inx=$inxv";
$nicetotal = number_format($totalitems);

/*
DRAW PAGINATOR
*/

// Give it the right class (the footer paginator has no summary and the current page has a different gfx)
if($placement == 'summary')
$type = 'summary';
else
$type = 'footer';

// Draw summary
if($placement == 'summary')
$pagination .= "

$string_results_page

";

if($lastpage > 1) // Paginator page selection is drawn only if more than 1 pages are there
{

$pagination .= '

    ';

    // First page selector
    if ($page > 2)

    // Previous page selector
    if ($page > 1)
    $pagination .= "

  • $string_next

    • ";

    // Page selectors
    if ($page < 4) //not enough pages to bother
    {
    for ($counter = 1; $counter <= min(5, $lastpage); $counter++)
    {
    if ($counter == $page)
    $pagination .= "

  • $counter

    • ";
    else
    $pagination .= "

  • $counter

    • ";
    }
    }
    elseif ($page > $lastpage - 3)
    {
    for($counter = $lastpage - min(5, $lastpage); $counter <= $lastpage; $counter++)
    {
    if ($counter == $page)
    $pagination .= "

  • $counter

    • ";
    else
    $pagination .= "

  • $counter

    • ";
    }
    }
    else
    {
    for($counter = $page - 2; $counter <= $page + 2; $counter++)
    {
    if ($counter == $page)
    $pagination .= "

  • $counter

    • ";
    else
    $pagination .= "

  • $counter

    • ";
    }
    }

    //next button
    if ($page < $lastpage)
    $pagination .= "

  • $string_next

    • ";

    //last button
    if ($page < $lastpage - 1)

    $pagination .= '

';
}

$pagination = "

$pagination

";

return $pagination;

} ?>

//This allows user to easily try the search with different options

// strings are translated defined in separate file for localization
//$string_try_diff_type = "Try a different type of search";
//$string_try_diff_header = "Didn't find what you were looking for?";
//$string_try_inx = "Try searching for $safeQuery only in page titles";

function trySomethingelse($safeQuery, $searchQuery, $inx, $tid,$string_try_diff_header, $string_try_diff_type, $string_try_inx, $string_buzz_tab, $string_local_tab,$string_recipes_tab){
if($inx==''){
$tryinx = "

  • $string_try_inx";
    }
    $trydiff='';
    switch ($tid){
    case "rc":
    $trydiff = "

  • $string_try_diff_type $string_local_tab or
    $string_buzz_tab";
    break;
    case "lo":
    $trydiff = "

  • $string_try_diff_type $string_recipes_tab or
    $string_buzz_tab";
    break;
    default:
    $trydiff = "

  • $string_try_diff_type $string_recipes_tab or
    $string_local_tab";
    }

    ?>

      print $tryinx;
      print $trydiff;
      ?>

    }
    ?>

    I’ve added a few classes to the final output. The previous and next links have class”nextlink” or class=”prevlink”. The current page has the number within a strong tag with class=”current”. Finally, the parent module has class=”pagelinks mod”. This makes it pretty simple to style

    Pagination CSS

    I’m using the YUI Sam Skin sprite for the tabbed search box. I’ve added a couple arrows to this sprite for my search pagination.


    .pagelinks {
    text-align:center;
    border:1px solid #ccc;
    padding:5px 0 0 0;
    }
    .pagelinks ul li {
    display:inline;
    }
    .pagelinks ul a, .pagelinks ul strong {
    display;block; padding:3px 5px;
    }
    .pagelinks ul strong {
    background-color:green; color:#fff;
    }
    .pagelinks li.nextlink a,.pagelinks li.prevlink a {
    padding-right:15px; font-size:120%; font-wieght:bold; background:url(/images/sprite.png) no-repeat 100% -1943px;
    }
    .pagelinks li.prevlink a {
    padding-right:0px; padding-left:15px; background-position:0 -1973px;
    }

    I am also not a PHP expert and welcome suggestions on improving the code.

    Download files

    Related articles by Zemanta

    ]]> http://www.last-child.com/pagination-boss-search-engine/feed/ 3 Create a tabbed search form with YUI http://www.last-child.com/tabbed-search-form-yui/ http://www.last-child.com/tabbed-search-form-yui/#comments Tue, 09 Sep 2008 14:00:59 +0000 Ted http://www.last-child.com/?p=159 Yahoo! makes it easy to create an accessible, handsome tabbed interface. I used their Tab View library to create the tabbed search form for V3GGIE.com. While Tab View can create the tabbed content dynamically, I’m using it to hide/show hard-coded individual forms.

    Update: I’ve removed the tabbed interface from V3GGIE.com. This particular use of the tabbed module seemed to have created some confusion in users. The approach is still valid, just not the way I originally implemented it. See the tabbed search form on V3GGIE.com

    Step 1. Create the basic HTML code.

    The tabbed code is a simple pattern:

    1. Start with a parent div and give it an id and class=”yui-navset”.

    2. Create an unordered list inside this div with class=”yui-nav”.
    3. Each list includes a deep link to a corresponding div that is also a child of the parent div. The link text in an em tag.
    4. V3GGIE Search

    5. Create a div with class=”yui-content” and create a set of content containing divs. Each div has an id.

      ...
      ...
      ...

    6. Insert the Tabview CSS at the top of the page, the Tab View JS at the bottom of the page, create a small js that instantiates the tab-view module.
    7. For easier styling, use the sam_skin CSS package and add class=”yui-skin-sam” to the body.

    Step 2. Use PHP to make it more interesting

    Each page calls this chunk of code to insert the tabbed form, it also sets a variable ($selected), determining which tab is selected on page load. I’m also inserting the last search query into the text input to make it easier on the user. This is easily done by grabbing the query from the Request object.

    The finished code:

    Try "San Francisco Pho", "Paris Fromage", or "92104 tofu"

    Try "corn chowder" or "vegan pizza"

    Try "Vegetarian Chinese Olympics"

    Try a subject: "PETA", "Tempeh", or "Paris -Hilton Vegetarian"

    View the source as a text file

    The Final Product

    We now have a tabbed module that allows the user to find recipes, news, blogs, and local restaurants from any page. This is an easy introduction to the YUI libraries. However, I came across the following surprises:

    • The order of the tabs must match the order of the target divs. I moved my tabs around and discovered they were toggling the wrong forms.
    • The links that generate the tabs need to have em tags surrounding the text
    • You’ll need to download the entire YUI package to gain access to the CSS and sprites needed for the library. The examples on the YUI site assume relative links to files, you will either need to duplicate that file structure or upload the skin’s sprite and change the CSS accordingly.
    Related articles by Zemanta
    ]]>     http://www.last-child.com/tabbed-search-form-yui/feed/ 0