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: css

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)

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 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)

April 9, 2010

Word-Wrap: Force Text to Wrap

break word

CSS: Word-Wrap Property (view demo)

You can specify either normal or break-word value with the word-wrap property. Normal means the text will extend the boundaries of the box. Break-word means the text will wrap to next line.

.break-word {
  word-wrap: break-word;
}
via webdesignerwall.com

One of my colleagues asked me how to force a text to wrap even if it has no spaces? We've try several methods and nothing worked. We also came up to a point to use JavaScript to force the wrapping. Given with some luck during with my googling, I found this property on the net. Saved us a lot of time. We could have opted to use JavaScript.

Loading mentions Retweet
Filed under  //   css   wordwrap  

Comments (0)

December 12, 2009

Suggested common elements and naming conventions for websites

Andy Clarke's suggestions

OK, here goes... my latest thinking...

#container
Page container (usually a < div >)
#branding
Used for a header or banner to brand the site.
    #branding-logo
Used for a site logo
    #branding-tagline
Used for a strapline or tagline to define the site's purpose
#nav or #navigation
Used to contain a navigation device
    #nav-main
Main or primary navigation
    #nav-section
Navigation to pages within the current site section
    #nav-external
Navigation to pages outside the site
    #nav-supplementary or #nav-supp
A supplementary list of links, perhaps in a footer. This can replace the common, but presentational #footer
    #nav-(whatever)
A list of links named at a designer's descretion
#search
Related to search interface and search results
    #search-input
A search form
    #search-output
Search results which could include a or other markup including definition lists
#content
Used for content rather than for another purpose such as navigation
    #content-main
The main content area
    #content-news
News related content
    #content-(whatever)
Could include any form of content, including #content-related, #content-quote etc.
#siteinfo
Used for various site related information
    #siteinfo-legal
Copyright information etc.
    #siteinfo-credits
Designer or other credits

E-commerce related

#content-products
An overall area containing products
    .products
Referring to individual products
    .products-prices
Prices, discounts, special offers etc.
    .products-description
A summary or longer description of a product
    .products-review
A customer review
    .products-(whatever)
Could include any form of product related content

Summary

My main reasons for these particular suggestions were to:

  • Name for content rather than presentation or positioning
  • Build a structural heirarchy
  • Allow for flexibility and extensibility within a common framework

So, what do you think? Does this reasoning 'work' or am I barking up the wrong tree? And even if these conventions are not definitive (and I don't suppose for a minute that they are ;) ), how can we best promote (what Eric continues to call) 'best practices' and see a set of conventions widely used?

via stuffandnonsense.co.uk

View a huge lists of some famous web designer's naming conventions

Loading mentions Retweet
Filed under  //   bookmark   css   guide   semantics   web standards   xhtml  

Comments (0)

December 10, 2009

CSS3 rounded corners for every browser? An alternative quick solution without headache

The simpler and quick solution I know to draw rounded corners in every browser is to use a mix of CSS3 and JavaScript. CurvyCorners is a free JavaScript library for creating gorgeous rounded corners for HTML elements. The final result looks like this:

The big advantage of this script is that lets render rounded borders in Safari, Chrome and Mozilla (which support rounded borders via -webkit-border-radius and -moz-border-radius) natively with CSS3 property and in IE and Opera with JavaScript.

via woork.blogspot.com

Loading mentions Retweet
Filed under  //   bookmark   css   css3   modernweb  

Comments (0)

December 6, 2009

Pushing Your Buttons With Practical CSS3 - Smashing Magazine

Various-buttons in Pushing Your Buttons With Practical CSS3

via smashingmagazine.com

Loading mentions Retweet
Filed under  //   bookmark   css   css3   modernweb  

Comments (0)



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