Advanced CSS Design Resources - last-child.com » Firefox http://www.last-child.com CSS Toys for Professional Web Developers Mon, 19 Dec 2011 18:30:15 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 CSS3 Gradient Backgrounds and Controlling Their Height http://www.last-child.com/gradient-backgrounds-height/ http://www.last-child.com/gradient-backgrounds-height/#comments Thu, 02 Dec 2010 21:42:28 +0000 Ted http://www.last-child.com/?p=268 Let’s assume you want to create a gradient background that starts at the top of the page and finishes at the bottom of your page header, i.e. is 100px tall. You can do this with a combination of CSS3 rules and avoid those ugly background images.

First off, I’m going to use the excellent Colorzilla gradient creator to establish the colors.

div#gradientbg { /*the following rules are from colorzilla*/
background: #e6f0a3; /* old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #FFFFFF 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#FFFFFF); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=1 ); /* ie */
}

This works great for applying a background to the entire page. But we want to limit this to just the header. We’ll need two declarations. First a browser-specific rule (background-size). This, however could cause a series of gradient bands to tile across the screen. so simply add the no-repeat as well.

-moz-background-size:100% 100px;
...
background:no-repeat;

Final CSS


div#gradientbg {
display:block; width:500px; height:400px; border:1px solid #ccc;
/*the following rules are from colorzilla*/

background: #e6f0a3; /* old browsers */

background: no-repeat -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #FFFFFF 100%);
-moz-background-size:100% 100px;/* firefox */

background: no-repeat -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638),
color-stop(51%,#c3d825), color-stop(100%,#FFFFFF));
-webkit-background-size:100% 100px;/* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#FFFFFF',GradientType=0 ); /* ie */
}

View the example page

]]> http://www.last-child.com/gradient-backgrounds-height/feed/ 0 ARIA support with the YUI library http://www.last-child.com/aria-support-with-the-yui-library/ http://www.last-child.com/aria-support-with-the-yui-library/#comments Wed, 06 Aug 2008 16:15:51 +0000 Ted http://www.last-child.com/?p=157 AJAX and DHTML have made web sites more interactive and easier to use. At least for visitors who are not using a screen reader. Screen reader users have to struggle with pages that lose focus, change without prompting the user of new data, and much more. However, there are many developers working on solutions to this problem.

Todd Kloots, of the Yahoo User Interface group was one of the first to develop accessible javascript libraries with the YUI menu package. He just published a blog post on the YUI web site about adding ARIA support to the YUI tab package. This information could also help you add this functionality to your existing YUI-based applications.

Here’s how Todd describes the goal

The YUI TabView Control is built on a strong
foundation of semantic markup that provides users with some basic accessibility. But while TabView looks like a desktop tab control, screen readers don’t present it as an atomic
widget, leaving users to figure out how the various HTML elements that compose a TabView relate to each other. However, through the application of the WAI-ARIA Roles and States, it is possible to enhance TabView’s accessibility such that users of screen readers perceive it as a desktop tab control.

Enhancing TabView Accessibility with WAI-ARIA Roles and States – Todd Kloots

The following video shows how this approach works with Firefox and a screen reader.

Related articles

]]> http://www.last-child.com/aria-support-with-the-yui-library/feed/ 0 Ready to try a different browser http://www.last-child.com/ready-to-try-a-different-browser/ http://www.last-child.com/ready-to-try-a-different-browser/#comments Wed, 05 Sep 2007 18:52:58 +0000 Ted http://www.last-child.com/ready-to-try-a-different-browser/ Opera SoftwareI’ve been frustrated lately with Firefox. It has been crashing several times a day on my laptop, eating up memory, and slow to start. Perhaps I have too many extensions, perhaps the browser has gotten too heavy, perhaps I’ve gotten too comfortable with it. So, it’s time to try another browser: Opera.

I’ve tried Opera before and have always had it on my machine. However, there are a few things I’ve become dependent on in Firefox and need to figure out how to do the same thing in Opera before making a permanent move.

Firefox dependencies

  • Linky: I love this extension and the ability to select a bunch of links and open them in separate tabs. I think Opera has native support for this, but I couldn’t figure it out.
  • Firebug and Web Developer Toolbar: How can we live without them?
  • Bookmark toolbar on the top. I’ve already got my bookmarks setup and need to access them quickly. I don’t like the sidebar treatment in Opera
  • Password memory: the Opera system so far seems clunky. How do I get it to remember my password after entering a protected domain, i.e. internal network
  • Switch Proxy: This firefox extension lets me switch my proxy instantly.
  • Pimpzilla: ok, I can live without this theme, but it is pretty darn nifty

Help?

If you are an Opera user, leave a comment on how to solve some of these issues. I’m sure I’m not the only one out there that would like to know.

]]> http://www.last-child.com/ready-to-try-a-different-browser/feed/ 5 Browser wars get the star geek treatment http://www.last-child.com/browser-wars-get-the-star-geek-treatment/ http://www.last-child.com/browser-wars-get-the-star-geek-treatment/#comments Mon, 12 Feb 2007 17:14:00 +0000 Ted http://www.last-child.com/browser-wars-get-the-star-geek-treatment/ The Web Sig in the Silicon Valley is putting together a very impressive meeting at the end of the month. Browser Wars, it’s a spoof of Star Wars and the dreaded browser wars of the 90′s.

Browser Wars
I’m the first to cringe when someone discusses Star Trek or Star Wars in reverential tones. The theme alone is enough for me to think twice about this event. However, this night at the Yahoo! campus will bring out the big guns of the browsers (Chris Wilson from IE, Mike Shaver from FireFox, and Håkon Wium Lie from Opera are members of W3C).

The three of them will discuss the DOM object, the future of browsers, and more. Here’s a snippet of the announcement.

Attack of the DOMs is very relevant in this Browser Wars Episode II as Web 2.0 increasingly utilizes AJAX in interface design, functionality and web applications. Each browser implements its supported DOM. IE7 is known to suffer in performance from memory leaks that are related to its inherited DOM architectural design. Firefox quickly gains popularity with its DOM strategy among Web 2.0 communities with faster loading time. DOM Level 2 CSS allows programs and scripts to dynamically access and update the content and of style sheets documents. No designers can deny the importance of the interaction between CSS and DOM in rendering site design properly across browsers.
Web Sig

If you are in the Silicon Valley, hurry up and reserve your seating today! This will fill up quickly and you shouldn’t pass up the opportunity to see Håkon Wium Lie, the inventor of CSS and one of the original creators of the “internet”. The event is free to attend and Yahoo! will provide snacks and free sodas.

]]> http://www.last-child.com/browser-wars-get-the-star-geek-treatment/feed/ 0 Add OpenSearch to your web site http://www.last-child.com/add-opensearch-to-your-web-site/ http://www.last-child.com/add-opensearch-to-your-web-site/#comments Wed, 30 Aug 2006 03:15:12 +0000 Ted http://www.last-child.com/add-opensearch-to-your-web-site/ Chris Wilson, the main guy behind IE7 (and older versions) discussed several new features of Internet Explorer 7 at the @media conference in London. One feature in particular that stood out for me was the OpenSearch protocol. Adding this to your site can be easy, it can also be a headache.

What is OpenSearch?

OpenSearch was developed by Amazon’s A9 search engine to enable aggregators to easily acquire content and make more robust search result pages. Internet Explorer 7 is using this protocol to give users the ability to search a site via the integrated search box.  It’s a two step process: create an XML document that defines your site’s search engine methods and then place a link to that XML in your page header. It sounds simple enough lets see it in action and then learn how to build the XML document.

Using OpenSearch

Yahoo! Tech recently added OpenSearch. If you have Internet Explorer 7 on your computer, you can enjoy the OpenSearch experience right away.  If you don’t have IE7 yet, download it now!

Yahoo! Tech and OpenSearch
Internet Explorer 7 has a built in search box in the top right of the page. If you have added OpenSearch to your site you will notice the box has an orange down arrow. Clicking on this arrow will expose a new menu. You can now search this site via the box and add the site to your favorite search engines.

If your site offers search results in RSS or Atom format, you’ll get enhanced functionality in your search results. Yahoo! Tech only features HTML results, so we give you the option of using the built in search box. 

At this point you may be saying… Is that all there is?  Well, yes. With a little bit of work, you are giving your visitors the ability to search from the built in search box and you are making it easier for A9 and other search engines to spider your content and surface your site in their results.  Let’s look at how easy it is to implement.

The OpenSearch XML

The XML document is fairly simple, you define the site’s name, description, attributions, favicon, and other simple elements. The important element is the Url.  This is where you define the location of your search engine and the parameter passed to define the query.

On Yahoo! Tech, the search page is tech.yahoo.com/sp and the query is passed as prod=search+term.  The OpenSearch XML expects you to use this specific markup {searchTerms} where you want the engine or IE7 search box to insert the query terms. Further, I found it much easier to write the url as a whole string, rather than setting the prod parameter as a sub-element. You can also allow the search engines to narrow the results by number {count} and more.

Let’s look at the XML in depth.




Start off the xml file with the standard opening. We then open the OpenSearchDescription element. There is a link to a9.com to define the namespace.


Yahoo! Tech
Search for the best gadgets and how to use your tech gear on Yahoo! Tech
tech gadgets technology cameras phones shopping

Define a short name for your site. Give it a description and the tags that define your site.





Yahoo! Tech is only providing an HTML version of the search results; you can visit the search result page. If we provided an RSS version the type would be application/rss+xml. The template is the location of the final search page. Notice how the searchTerms variable is inline. Ideally, I could have left ?prod=… out of the url and defined it as a parameter, but this caused inconsistent implementation.

We then define another parameter, the results and the value is the OpenSearch variable for the number of results returned. You can see a full list of parameters on the A9 OpenSearch web site.


Yahoo! Tech Search
Yahoo! Tech
Copyright © 2006 Yahoo! Inc. All rights reserved.
http://www.yahoo.com/favicon.ico

We are now providing a longer name where it is appropriate to display it. The developer is Yahoo! Tech. The attribution is how we want results credited. We are using  the standard copyright information. We also define  the location of our favicon. You can define multiple icons for inside the box and if you have RSS, on the results page.



open
false
en-us
UTF-8
UTF-8

Finally, we add some extra information about the display, search content, and close the XML. Overall, it’s a fairly small, simple bit of XML(tech-opensearch.xml).  There’s a full list of parameters you can add to your search query and elements to define your xml at: http://opensearch.a9.com/spec/1.1/

Do you want to make it even easier?

Go over to Enhance IE and use their simple OpenSearch generator to build the XML for you! Simply do a search for TEST on your site and copy that url into their form. Voila, you’ve got a basic OpenSearch XML file.

Activating your OpenSearch XML

If you provide an RSS or Atom feed, you can log in to A9 and register your site. Internet Explorer 7 also needs to know where your XML document is located as well.  Simply add a link to it in the head of your document:

While Chris was busy hyping the latest features of Internet Explorer 7, the OpenSearch protocol will also be supported by Firefox 2.0. That’s two for the price of one!.

WordPress and OpenSearch

If it’s so easy, why doesn’t it work on this blog? WordPress blogs are setup to use the index page as the search page.  This is the results page for a search of XML on this blog: http://last-child.com/index.php?s=xml

I’ve tried setting up the XML to point towards index.php and get the subsequent errors.  Chris Fairbanks has released an OpenSearch plugin for WordPress (http://www.williamsburger.com/wb/archives/opensearch-v-1-0).  It’s not a simple procedure and I simply haven’t had time to implement it.

With the introduction of Microformats and the OpenSearch protocol, the (lowercase!) semantic web is getting closer to being a reality. This bit of xml is fairly easy to generate and opens your site to new audiences and functionality. Spend an hour or two getting acquainted with the OpenSearch concept and activate your site today.

Related Information

]]> http://www.last-child.com/add-opensearch-to-your-web-site/feed/ 7 New version of Firebug released http://www.last-child.com/new-version-of-firebug-released/ http://www.last-child.com/new-version-of-firebug-released/#comments Wed, 24 May 2006 17:20:07 +0000 Ted http://www.last-child.com/new-version-of-firebug-released/ firebug logoFirebug will soon join the web developer toolbar as a can’t-live-without tool in your browser. This Firefox extension lets you track down the JS, CSS, and HTML errors that are driving you crazy. Joe Hewitt just released the latest version of Firebug. Get it now while the going is good.

]]> http://www.last-child.com/new-version-of-firebug-released/feed/ 0 Get rid of the dotted lines on links with image replacement http://www.last-child.com/get-rid-of-the-dotted-lines-on-links-with-image-replacement/ http://www.last-child.com/get-rid-of-the-dotted-lines-on-links-with-image-replacement/#comments Tue, 18 Apr 2006 17:15:40 +0000 Ted http://www.last-child.com/get-rid-of-the-dotted-lines-on-links-with-image-replacement/ I don’t remember where I first found this tip (Hedger Wang?), but it’s a good one. If you are using image replacement, i.e. background images and negative text-indent, you may notice a dotted line appear when the link is clicked and waiting for the page to change (:focus). It’s outlining the text that happens to be wayyyyy off screen. It’s easy as pie to fix this issue.

CSS Fix

This will fix the problem in Firefox. Just drop this into your global.css file.

a:focus { -moz-outline-style: none; }/*this avoids having image replacement sections display a dotted outline*/

JavaScript Fix

This will fix the issue in the other browsers.

var theahrefs = document.getElementsByTagName('a');
//fix dotted line thing when link is OnClicked
for(var x=0;x!=theahrefs.length;x++){
theahrefs[x].onfocus = function stopLinkFocus(){this.hideFocus=true;};
}

]]> http://www.last-child.com/get-rid-of-the-dotted-lines-on-links-with-image-replacement/feed/ 2 Mouseover CSS inspector for Firefox http://www.last-child.com/mouseover-css-inspector-for-firefox/ http://www.last-child.com/mouseover-css-inspector-for-firefox/#comments Mon, 27 Feb 2006 00:56:50 +0000 Ted http://www.last-child.com/mouseover-css-inspector-for-firefox/ Nicolas Huon recently released CSSViewer, a Firefox extension that gives you a summary of dimensions and styles associated with an element when you mouse over it.

I’ve been a big fan of Slayeroffice’s Mouseover DOM Inspector, but this new extension is much easier to use and certainly helps solve your layout problems.

]]> http://www.last-child.com/mouseover-css-inspector-for-firefox/feed/ 0 Firefox search plugin for www.alistapart.com http://www.last-child.com/firefox-search-plugin-for-wwwalistapartcom/ http://www.last-child.com/firefox-search-plugin-for-wwwalistapartcom/#comments Sun, 26 Feb 2006 03:00:02 +0000 Ted http://www.last-child.com/firefox-search-plugin-for-wwwalistapartcom/ Everyone has their bible. For some, it is the Holy Bible, for others, something not quite so reverent. As a child, our family life would come to a screeching halt when our bible arrived in the mail. Being the youngest, I usually got the National Enquirer after it had been scanned, read, and laughed about by the rest of the klan.

I’m all grown up now and my bible and gods are no longer the gossip rag and celebrity stalkers. Instead, I look up to my Rock Gods, such as NoMeansNo, Drive Like Jehu, and Ethel Merman. The omniscient National Enquirer has been replaced with web sites such as AListApart.com.

The AListApart path to enlightenment

Hardly a week goes by without doing a search on alistapart for the path to this or that standards-based method. A couple months ago, I created a search box plug-in for Firefox to make it much easier.

With the blessing of Jeffrey Zeldman, I present to you the www.alistapart.com search plugin for firefox.

The javascript to install the plugin is now working.

]]> http://www.last-child.com/firefox-search-plugin-for-wwwalistapartcom/feed/ 0 Standards-based web development resources made even easier http://www.last-child.com/standards-based-web-development-resources-made-even-easier/ http://www.last-child.com/standards-based-web-development-resources-made-even-easier/#comments Sun, 26 Feb 2006 02:16:16 +0000 Ted http://www.last-child.com/standards-based-web-development-resources-made-even-easier/ Chris Pederick of the all mighty Web Developer Toolbar mentioned a great service today on his blog. Rollyo allows you to create your own personal search page that is super easy to build.

I’ve jumped at the chance to build a firefox toolbar to search the best standards-based resources available (and my site to boot.) I simply created a Rollyo page and then created the Firefox search plugin to use it.

I don’t have time to create the super-easy javascript link right now, but here’s how you can install it in two minutes.

  1. Download these two files: standardistas.src, standardistas.gif
  2. Place them in your program files/mozilla firefox/searchplugins directory
  3. Restart Firefox.

Or…

Visit the new Rollyo – Standardista page and click on the Add to Firefox link on the right sidebar. This approach will give you a generic Rollyo icon in the search box.

Summary

In one simple search you can get the relevant information from all of these sites without having to swim through thousands of extraneous results.

I’ve added more standardistas to the list:

The Future

I begin working with Yahoo! in a week. I had planned on building a page using their search API in the near future. Go ahead and download this Firefox toolbar plugin. I will be adding this to the mozdev archive and when I make the new Yahoo! version, your toolbar will actually update itself. As Christopher Lowell would say: “How cool is that?!”

–This post was originally published on www.tdrake.net

]]> http://www.last-child.com/standards-based-web-development-resources-made-even-easier/feed/ 1