Entries Tagged as “Code”
Don't Reset – Soft Reset
Summary
Soft Reset (for the lack of a good name) is very similar to many of the already popular resets like Meyer Reset or YUI Reset in that the goal it to level the playing field for web developers. What makes this reset different is that it attempts to hone in and reset only the properties that really need to be reset. Leaving some styling to the browser.
My reason for creating this reset is that I wanted a reset that was not overly bloated with unnecessary resets for html properties that I simply didn't use in my layouts. I also didn't think it's necessary to reset every property on the page when sometimes a simple localized class would be sufficient. For example: some sites may only need the main navigation and sub navigation to be reset. Why reset everything only to build it back up for the main content area?
Goals
- Reset common html elements while leaving some items alone
- Slim down the reset by omitting HTML 5 specific elements
- Reduce the need to build up elements when the browser default is acceptable
- Add a reusable class to deal with list that need to be reset
reset.css
/* Soft Reset */
body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td { margin:0; padding:0; }
table { border-collapse:collapse; border-spacing:0; }
fieldset, img { border:0; }
h1, h2, h3, h4, h5, h6, address, caption { font-style:normal; font-size:100%; font-weight:normal; }
caption, th { text-align:left; }
ol.listreset, .listreset ol, ul.listreset, .listreset ul, .listreset li { margin:0; padding:0; list-style:none; }
Usage
For the most part SoftReset works exactly the same as other resets. The biggest difference is that I abstracted the ordered and unordered list resets into a separate class. Simply apply the class to any list that you need to reset like a navigation for example. Here is an example of how I would use it.
<ul class="navigation listreset">
<li><a href="">Home</a></li>
<li><a href="">Blog</a></li>
</ul>
Why Create The .listreset Class?
Reusing classes are performance freebies. If you follow the concepts around Object Oriented CSS (OOCSS) you will already know that abstracting these bits of code can greatly improve your application performance. Where as performing a full reset, to build it up again is a big performance drain. If your using a css framework, chances are, your breaking down and rebuilding lists so often, that this single class can save you hundreds of lines of code on a larger site.
Samples And Testing
The YUI 2 reset already had a very comprehensive HTML test page. I ran my reset against it to see how it did. I also created my own HTML test page with many of the same elements with a few additional ones.
NOTE: Use Firebug to turn the reset off and on.
YUI HTML Test Page | My Test Page
Feedback
Since this is just something I am dabbling with, I would appreciate your feedback on this. Maybe it's a good idea? Maybe It's a stupid idea? I urge you to download a copy of the soft reset css and try it out for yourself. See if it works for you. If you have suggestions for improvements I would like to here them in the comments bellow.
→ Respond NowTags: Code · CSS
Open links in a new window
If you perform a search for "open links in new window" you will typically find two groups of people. Ones the hate it when links open in a new window, and ones that hate links that don't open in a new window. It seems that people are pretty picky (and vocal) about the manor in which links open. Oddly enough searching for a good solution proved more difficult than I thought.
Basic Criteria
Because people are so particular about their links opening in new windows. I wanted to give users an option to open linked pages they way they want them to work. A preference toggle of sorts. I also wanted to default option to xhtml valid and it has to be accessible in it's default state or with javascript turned off.
Thanks to a friend and fellow web developer Andy Ford, who helped me with the final piece of the puzzle to make this work.
The Code
The code is pretty straight forward. We have a form with a checkbox with with text that reads something like "Open links in new window" This works as the preference toggle. If the box is checked do some dirty and non valid stuff to the code to make it work.
See a demo of this script here
<form name="targeter">
<input type="checkbox" name="targetbox" id="tcheck" onclick="targetLinks(this.checked);">
<label for="tcheck" style="cursor: hand;">Open links in new window</label>
</form>
<script language="JavaScript">
function targetLinks(boNew) {
if (boNew)
where = "_blank";
else
where = "_self";
for (var i=0; i<=(document.links.length-1); i++) {
document.links[i].target = where;
}
}
</script>
I thought this was a bit easier to implement than most of the solution I found out there that required you to add a new class to the link. Some people suggested using rel="external" on the links. My response to this is simple. Not all links that need to open in a new window are external. Adding rel="external" is not semantic so I would prefer not to add that markup to my code in that way.
I am sure there is a better way to make this work. But this is what I scabbed together. If you have a better way, I would be interested in knowing about it.
→ Respond NowTags: Code · usability
CSS Naked Day
A few years ago, Dustin Diaz started a Web Standards movement aimed to promote web standards around the world. He dubbed it CSS Naked Day! A day when websites around the world strip out their css and show off their for a day.
Last year I hard coded a toggle into my website and totally forgot about it until I just happened to go to my website and find the css was gone. My first reaction was to crap a blue twinkie and wonder what had happened. Then I saw the alert at the top of the page telling me it was CSS Naked Day. Imagine my relief.
This year I decided to create a plugin for Mango Blog that automatically removed the css and added the notification message to tell users that it was css naked day.
- Plugin version:
- 1.0
- Last Updated:
- 2009-04-10
- Requires:
- Mango Blog 1.3+
- Auto-install URL:
- http://www.visual28.com/assets/content/mango/cssNakedDay.zip
What If I Don't Have Mango Blog
Since not everyone uses mango but may still want to participate in CSS Naked Day with their coldfusion powered blog I thought I would throw in some samples of my code from before the creation of the Mango Plugin. It's really simple but for a CF newbie it might be usefull.
Place this in your <head> and put your css files into it.
<!-- css files here -->
Put this code just inside the <body> tag.
What happened to the design?
To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.
→ Respond NowTags: Code · ColdFusion · Freebies · Mango Blog · Plugins
Twitter Plugin Updated for Mango 1.3 Compatibility
Now that Mango Blog 1.3 is out a few plugins may have to be updated to the new 1.3 version to include auto install. Thanks to the help of Seb Duggan the mango blog twitter plugin has been updated for compatibility with the new auto Install system. Get the twitter plugins below:
Mango Blog 1.3 Compatible Version
http://www.visual28.com/assets/content/mango/twitter-1.3.zip
Mango Blog 1.2 Compatible Version
http://www.visual28.com/articles/twitter-plugin
→ Respond NowTags: Code · Freebies · Mango Blog · Plugins
Don't Be A Bad Javascript User
Let me start off by saying that this is not going to be a javascript bashing article. I don't hate javascript, in fact I really do like it a lot--- although the title of this article may seem to the contrary. There are many javascript libraries that do really cool stuff. I love that many of these scripts enhance webpages without requiring the use of flash.
The problem I have been encountering lately has more to do with the improper use or implementation of javascript. I think there is far to much whiz-bang stuff being added to many of todays modern websites without considering the impact on users. I feel it's important that before you add a script or a feature to your site that you stop and ask yourself: Is this thing I am about to add to a site going to help my visitors or hurt them? Does it add any value to for the user? Does it hurt them if it's not there? Will it only cause more confusion?
Rather than just talk about it, I have compiled a few video clips to help demonstrate some bad uses of javascript.
→ Respond NowTags: Accessibility · Code · usability
