ourlil.com

A web site for tutti noi (all of us!)

  • Home
  • About
  • About – sample
  • Healing Christofer – Fun’-Raiser
    • Gallery
  • JP’s Page

Posts Tagged ‘CSS’

Let’s make the web faster – Google Code

Wednesday, June 24th, 2009

Let’s make the web faster – Google Code.

Some choice excerpts:

CSS: Using every declaration just once

Using every CSS declaration only once is an effective way to reduce file size of style sheets. It’s not a trivial optimization technique though: Watch over the cascade and adjust your editing workflow.

HTTP caching

Web pages can load much faster on repeated visits if the resources come from the cache. Learn about two groups of HTTP headers that make all the difference.

Optimizing web graphics

Optimizing your web illustrations, icons, and graphics is one of the simplest yet most effective ways to decrease your page load time. In this tutorial, we discuss image file formats and optimize some real Google graphics for faster download on the web.

Tags: CSS, HTML, images, js, optimization
Posted in Browsers, coding, javascript | Comments Off

Even More Rounded Corners With CSS – Schillmania.com

Friday, October 31st, 2008

nice CSS rounded corners implementation

Even More Rounded Corners With CSS – Schillmania.com

And here’s the actual implementation and notes:

http://www.schillmania.com/projects/dialog2/

http://www.schillmania.com/projects/dialog2/download/20070214-even-more-rounded-corners.zip

Tags: CSS, radius, rounded corners
Posted in coding | Comments Off

Workarounds, Filters, and Hacks – SitePoint CSS Reference

Friday, August 8th, 2008

Here’s an interesting site for CSS hacks and workarounds…

Workarounds, Filters, and Hacks – SitePoint CSS Reference

Tags: CSS, Hacks, workarounds
Posted in Hacks, workarounds | Comments Off

CSS Hacks and IE7

Thursday, May 29th, 2008

This is a really great article on how to hack IE7. CSS Hacks and IE7

  • The Child Selector
  • This selector uses a “>” symbol as a “combinator” that is placed between two parts of a CSS selector, and indicates that the target of the rule is the element on the right side of the “>” combinator, but only when that element is a direct child of the element to the left of the combinator. Thus, the selector table>td can never target any element, because TD’s are never direct children of tables, only of TR’s. On the other hand, the selector tr>td would select every TD on the page, since all TD’s are direct children of TR’s.

    The main difference between the Child combinator and the familiar space combinator is that the space combinator is a “descendant” combinator, meaning that the element to the right of the space only needs to be between the tags of the element on the left to be selected. So with the selector table td, all TD’s will selected, since TD’s always fall between the tag pair of one table or another.

    The Child combinator is quite useful for targeting rules to direct children of an element, without also targeting the more deeply nested descendants as well. Unfortunately, up until IE7 there was no point in using it for its intended purpose, since so few of the viewing public would get the benefits of the styling.

  • The Adjacent Sibling Selector
    • This selector is a “+” combinator symbol placed between parts of a selector, and is very similar to the Child combinator. The only difference between the two is that while the Child combinator points to direct children of an element, the Adjacent Sibling combinator points to an element which directly follows another element in the source.

      Thus the selector tr+td cannot select anything, because no TD ever directly follows a TR. Instead, TD’s are contained inside TR’s, and that is not considered to be “following” the TR. However, the selector tr+tr would select any TR that directly followed another TR, which means that every TR within a table would be selected except for the very first TR in that table.

      Get it? An adjacent sibling element not only follows its previous sibling, but is also completely separate from it. Further, if two DIV’s are in sequence and each contains a paragraph, those two paragraphs are not considered siblings, because they reside in different parent elements. The fact that one follows another means nothing unless the following sibling starts at the same point where the previous sibling ends.

  • Star HTML

Oh, you want to know about that structural thing? Well, the hack that uses it is called the star-html hack, and it works by taking advantage of an oddity in Explorer’s treatment of the Document Object Model, or DOM for short. Simply stated, all web pages start with a root element called html, which then contains two children, the head and the body elements. Those two then contain other children, and so forth.

  • Most browsers obey this arrangement, but Explorer for both Win and Mac do not. They seem to think there is a mysterious element enclosing the html element! It’s pretty strange, but in fact this extra outer “root” element has no apparent ill effects on web pages, and remained unnoticed for years, until Edwardson Tan began experimenting with CSS selectors. He found that a selector written as * html  .targetelement would apply the styles to .targetelement, but only for the IE browsers.

    Think about it. That star is the “universal” selector, so it points to any element, but it comes before html. Therefore, the full selector in effect says: “Select .targetelement when it is contained within html, and when html is contained within any other element”.

Tags: CSS
Posted in Browsers, Hacks, MSIE, Trends, Web 2.0, WebTech, quirk, standards | Comments Off

Content Syndication with Case-Hardened JavaScript

Thursday, May 8th, 2008

Content Syndication with Case-Hardened JavaScript

Nice little tutorial on creating 3-tier/MVC JavaScript…

Tags: CSS, javascript
Posted in Hacks, Trends, Web 2.0, javascript, nifty | Comments Off

ALA’s New Print Styles + hasLayout

Monday, March 3rd, 2008

Perplexing little CSS issue that’s dogged me for ages: Why does MSIE have weird positioning some times? It could be because of hasLayout, and all you need to do, is apply position:relative to the CSS declaration:

A List Apart: Articles: ALA’s New Print Styles

The only little oddity here is position: relative. I included that because IE/Win has a tendency to make elements disappear if you pull them upward like this. The cure is to position them, which I suspect triggers the hasLayout flag. I don’t pretend to understand all the nuances of hasLayout, but recent information from Microsoft and third-party sources has shed quite a bit of light on the subject–it would appear that many of the layout problems that bedevil us in IE/Win are the result of an element not having hasLayout.

Tags: CSS
Posted in MSIE, Web 2.0, alistapart.com, nifty, quirk, standards | Comments Off

A List Apart: Articles: Improving Link Display for Print

Sunday, March 2nd, 2008

Alist Apart Link Printing Here’s a nifty utility for improving printed HTML pages so links are displayed at the end of the document.

A List Apart: Articles: Improving Link Display for Print

Tags: CSS
Posted in alistapart.com, print | Comments Off

A couple of useful WebDev links…

Monday, May 21st, 2007

I thought I’d post a couple of links to some WebDev sites & tools I use every day…

FireFox Extensions

Most of these are available on Mozilla’s Recommended Addons site.

  • Web Developer – Powerful Web Development tools for outlining DIVs, TABLEs, CSS, etc.
  • User Agent Switcher – change the User Agent on a site or page (pretend your MSIE 6 or 5)
  • Firebug – edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…
  • GreaseMonkey – customize pages & sites by adding your own ‘user scripts’
  • AdBlock Plus – block ads & flash
    NOTE: If you need to show blocked ads (i.e., you need to see/test OAS ads -D ), there’s an ‘ABP’ button next to the Google search bar (looks like a red or green stop sign). Click the little disclosure triangle next to the ABP button, and choose ‘Disable on [site-url]’. If you need help, just ask!
  • FlashGot – File/Image/Link downloader
  • Fasterfox – page load timer (right-side of statusbar)

CSS Resources

  • AlistAPart.com – A great place for learning & pilfering^H^H^H experimenting with CSS techniques.
    • Taming Lists
    • Elastic Design
    • CSS Drop Shadows
    • …the list goes on!
  • meyerweb.com/eric/css – Eric Meyer’s CSS site
    • CSS Edge – life on the edge!
    • …there’s much more here…
  • SelectORacle – a nifty online tool for learning how CSS2 & CSS3 selectors work
  • Rijk’s panelizer – adds W3C’s CSS & HTML specs to your Mozilla Sidebar
    • Just download the panelizer.zip, place it somewhere handy & unzip it. Then open the included ‘panelizer.html’ file, and click ‘Add Panel’. I created a ‘Sidebars’ bookmark folder in my Bookmark Toolbar, and placed the ‘bookmarks’ in there.

Mac Tools

NOTE: The following contains Mac-only tools. If you are afraid of Macs, or have aversions to heights, please close your browser now. This message will self-destruct in five seconds. Good luck team!

  • TinkerTool (hidden Mac OS X settings, like double x double scrollbars):
    http://macupdate.com/info.php/id/5721
  • WebDevAdditions for Safari (Like Mozilla Web Developer for Safari):
    http://macupdate.com/info.php/id/17672
  • BatChmod (batch Chmod GUI for Mac OS X – Bonus: enables you to empty stubborn Trash)
    http://www.macupdate.com/info.php/id/6440
  • Pseudo (run apps as `sudo`):
    http://www.macupdate.com/info.php/id/5620
  • TextWrangler (freeware text editor–BBEdit’s little brother)
    http://barebones.com/products/textwrangler/

Need help with any of the above? Just ask!

Tags: CSS
Posted in HTML, Hacks, Interactive Team, WebTech, nifty | Comments Off

  •  

    March 2010
    S M T W T F S
    « Feb    
     123456
    78910111213
    14151617181920
    21222324252627
    28293031  
  • Pages

    • About
    • About – sample
    • Healing Christofer – Fun’-Raiser
      • Gallery
    • JP’s Page
  • Archives

    • February 2010
    • November 2009
    • August 2009
    • July 2009
    • June 2009
    • May 2009
    • March 2009
    • February 2009
    • January 2009
    • December 2008
    • October 2008
    • September 2008
    • August 2008
    • July 2008
    • June 2008
    • May 2008
    • April 2008
    • March 2008
    • February 2008
    • December 2007
    • October 2007
    • September 2007
    • August 2007
    • July 2007
    • June 2007
    • May 2007
  • Categories

  • Favorites

    Here're a few sites I like to visit:
    • WPMU.org
    • Holy Shmoly
    • AppleInsider.com
  • Meta

    • Log in
    • Entries RSS
    • Comments RSS
    • WordPress.org

Copyright © 2010 - ourlil.com | Entries (RSS) | Comments (RSS)

WordPress theme designed by web design