Hi. I’m Andrew

Browse by Tags
Disclaimer

This notebook is Andrew Abogado's online journal to talk about or bookmark stuffs related with his field. Some opinion may not be shared or doesn't represent the company Andrew is working with. The content in this notebook is licensed under Creative Commons which means you are free to share & remix but under the condition of giving credit where credit is due.

For us web designers

Subscriptions

Filed under: bookmark

See all posts on posterous with this tag » 
July 28, 2010
 

CSS Browser Selector

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

USAGE

1. Copy and paste the line below, inside <head> and </head> tag

<script src="css_browser_selector.js" type="text/javascript"></script>

2. Set CSS attributes with the code of each browser/os you want to hack

Examples:

  • html.gecko div#header { margin: 1em; }
  • .opera #header { margin: 1.2em; }
  • .ie .mylink { font-weight: bold; }
  • .mac.ie .mylink { font-weight: bold; }
  • .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]

Available OS Codes [os]:

  • win - Microsoft Windows
  • linux - Linux (x11 and linux)
  • mac - Mac OS
  • freebsd - FreeBSD
  • ipod - iPod Touch
  • iphone - iPhone
  • webtv - WebTV
  • mobile - J2ME Devices (ex: Opera mini)

Available Browser Codes [browser]:

  • ie - Internet Explorer (All versions)
  • ie8 - Internet Explorer 8.x
  • ie7 - Internet Explorer 7.x
  • ie6 - Internet Explorer 6.x
  • ie5 - Internet Explorer 5.x
  • gecko - Mozilla, Firefox (all versions), Camino
  • ff2 - Firefox 2
  • ff3 - Firefox 3
  • ff3_5 - Firefox 3.5 new
  • opera - Opera (All versions)
  • opera8 - Opera 8.x
  • opera9 - Opera 9.x
  • opera10 - Opera 10.x
  • konqueror - Konqueror
  • webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 - Safari 3.x
  • chrome - Google Chrome
  • iron - SRWare Iron new

Extra Codes:

  • js - Will be available when js is enable, so you can show/hide some stuffs

INSPIRATION

Original idea by 37signals.

http://37signals.com/svn/archives2/browser_selectors_in_css.php

via rafael.adm.br

There's a related post over at 45 Royale. It's however the first result when I searched for this solution. This is quite a handy tool because every operating system's implementation on every browser are different in terms of font rendering. Pretty much perfect for my need.

Loading mentions Retweet
Filed under  //   bookmark   browser   css   selector  

Comments (0)

July 4, 2010
 

Do websites need to look exactly the same in every browser?

via dowebsitesneedtolookexactlythesameineverybrowser.com

Loading mentions Retweet
Filed under  //   bookmark   modernweb   webdesign   websites  

Comments (0)

June 26, 2010
 

Universal Internet Explorer 6 CSS | for a beautiful web

How do you answer the Internet Explorer 6 question?

  1. Design for better browsers, then design alternative solutions to handle IE6 bugs?
  2. Write a remedial IE6 stylesheet to address layout issues?
  3. Use JavaScript to bootstrap CSS support in IE6?
  4. Make your site look exactly the same in IE6 as in any other browser?
  5. Develop to better browsers and spend no development time or testing for IE6?
  6. Block IE6 users from seeing your site's styles?
read the rest of the post via forabeautifulweb.com

 

Loading mentions Retweet
Filed under  //   bookmark   css   ie6   modernweb   web standards  

Comments (0)

June 20, 2010
 

Why tables for layout is stupid: problems defined, solutions offered


photos credit: http://www.hotdesign.com/

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.

Overview: What’s in it for me?

We'll give you an introduction to a way of working that will

  • make your pages load faster
  • lower your hosting costs
  • make your redesigns more efficient and less expensive
  • help you maintain visual consistency throughout your sites
  • get you better search engine results
  • make your sites more accessible to all viewers and user agents
  • and give you a competitive edge (that is, job security) as more of the world moves to using Web standards.

We'll also talk about how laying out pages with Cascading Style Sheets (CSS) requires a slightly different way of thinking about your content and your markup than you may be used to.

The problem with using tables:

  • mixes presentational data in with your content. (This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit. Bandwidth ain't free. )
  • This makes redesigns of existing sites and content extremely labor intensive (and expensive).
  • It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.
  • Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.
via hotdesign.com
Enjoyed reading this post. Very informative. A plus points to Web Standards.

Loading mentions Retweet
Filed under  //   bookmark   tables   web standards  

Comments (0)

June 17, 2010
 

Multiple Backgrounds and Borders with CSS 2.1 – Nicolas Gallagher


Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required.

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

How does it work?

Essentially, you create pseudo-elements using CSS (:before and :after) and treat them similarly to how you would treat HTML elements nested within your target element. But they have distinct benefits — beyond semantics — over the use of nested HTML elements.

To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer and pinned to the desired points of the HTML element using absolute positioning.

via nicolasgallagher.com

Loading mentions Retweet
Filed under  //   bookmark   css   modernweb  

Comments (0)

June 12, 2010
 

Dropbox: Files Without Borders - Forbes.com

Tapping the cloud, Dropbox makes it simple to access documents from anywhere.


image

No more USB sticks: Dropbox's Drew Houston.


Drew Houston was waiting for a bus at Boston's South Station in December 2006 when frustration sparked inspiration. The MIT computer science graduate planned to work on a coding project during the four-hour ride to Manhattan but had left the USB memory stick with the project on it at his apartment. Instead, he began building what today is Dropbox, a service that automatically synchs any kind of file from one computer to another and to the Web, for easy access and sharing.

via forbes.com

Loading mentions Retweet
Filed under  //   bookmark   cloud   technology  

Comments (0)

June 11, 2010
 

The ultimate jQuery Plugin List | Kollermedia.at

jQuery is definitely my favourite Javascript Library and this ultimate jQuery Plugin List is for all other jQuery Lovers out there. At the moment there are about 240 awesome Plugins in the List I’m sure that there are a lot of other plugins out there – so if you knew one that’s not in the list please post a comment and i will add it. Thanks!

File upload

Ajax File Upload
jQUploader
Multiple File Upload plugin
jQuery File Style
Styling an input type file
Progress Bar Plugin

Form Validation

jQuery Validation
Auto Help
Simple jQuery form validation
jQuery XAV – form validations
jQuery AlphaNumeric
Masked Input
TypeWatch Plugin
Text limiter for form fields
Ajax Username Check with jQuery

Read the rest of this post »

Loading mentions Retweet
Filed under  //   bookmark   jquery  

Comments (0)

March 26, 2010
 

Web Standards 2008: Three Circles of Hell | A List Apart

Web Standards 2008: Three Circles of Hell

Blame is the cure, cure anything”—Mike Doughty

Readers and conference participants know that the more I write and talk about web standards, the more I point out that they really don’t exist. Step back with me for a moment: we wouldn’t need a web standards movement if there were standards! We continue to do the very best work we can to arrive at a standard of quality and professionalism. Sadly, however, despite a decade or more of web standards evangelism, we face the prospect of losing whatever influence we’ve gained these past years.

via alistapart.com

 

Loading mentions Retweet
Filed under  //   bookmark   web standards  

Comments (0)

March 17, 2010
 

Elliot Jay Stocks » Web designers who can’t code

Honestly, I’m shocked that in 2010 I’m still coming across ‘web designers’ who can’t code their own designs. No excuse.

via elliotjaystocks.com

 

Loading mentions Retweet
Filed under  //   bookmark   webdesign  

Comments (0)

March 12, 2010
 

Ubuntu's Circle of Friends Gets Smaller - Brand New

Ubuntu

Ubuntu

The new style in Ubuntu is inspired by the idea of “Light”.

We’re drawn to Light because it denotes both warmth and clarity, and intrigued by the idea that “light” is a good value in software. Good software is “light” in the sense that it uses your resources efficiently, runs quickly, and can easily be reshaped as needed. Ubuntu represents a break with the bloatware of proprietary operating systems and an opportunity to delight to those who use computers for work and play. More and more of our communications are powered by light, and in future, our processing power will depend on our ability to work with light, too.

Visually, light is beautiful, light is ethereal, light brings clarity and comfort.
— On Brand at the Ubuntu Wiki

Read the rest of this post »

Loading mentions Retweet
Filed under  //   bookmark   identity   redesign   ubuntu  

Comments (0)



Copyleft 2010 Andrew Abogado. Some Rights Reserved. // Jump to Top