Wuff, Wuff!!: 03/2009

3/31/2009

html5 tags

structure tags: HTML 5 SECTION TAG, HTML 5 article tag, HTML 5 header tag, HTML 5 footer tag
HTML 5 a tag - use id instead of a name as anchor

In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. This was determined by the href attribute. In HTML 5, the <a> tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink.

HTML 5 has some new attributes, and some HTML 4.01 attributes are no longer supported.

name - Deprecated. Names an anchor. Use this attribute to create a bookmark in a document. Not supported. Use id instead.
ping - Space separated list of URL's that gets notified when a user follows the hyperlink. Use only if the href attribute is present

HTML 5 audio tag

<audio src="horse.wav"> Your browser does not support the audio element. </audio>
autoplay - If set to true, the audio will start playing as soon as it is ready.
controls - If set to true, the user is shown some controls, such as a play button.
end - Defines where in the audio stream the player should stop playing. By default, it plays to the end.
loopend - Defines where in the audio stream the loop should stop, before jumping to the start of the loop. Default is the end attribute's value.
loopstart - Defines where in the audio stream the loop should start. Default is the start attribute's value.
playcount - Defines how many times the audio should be played. Default is 1.
src - Defines the URL of the audio to play
start - Defines where in the audio stream the player should start playing. By default, it plays from the beginning.

HTML 5 VIDEO TAG

autoplay - If true, then the audio will start playing as soon as it is ready
controls - If true, the user is shown some controls, such as a play button.
end - Defines where in the audio stream the player should stop playing. As default, the audio is played to the end.
height pixels Sets the height of the video player
loopend - Defines where in the audio stream the loop should stop, before jumping to the start of the loop. Default is the end attribute's values
loopstart - Defines where in the audio stream the loop should start. Default is the start attribute's values
playcount - Defines how many times the audio clip should be played. Default is 1.
poster - The URL of an image to show before the video is ready
src - The URL of the audio to play
start - Defines where in the audio stream the player should start playing. As default, the audio starts playing at the beginning.
width - pixels Sets the width of the video player

table column in firefox

Mozilla Taiwan 討論區: [問題]col標籤的style - 在 firefox 就算是設定col.foo{color:red} 也是不會吃的

你可以看一下 W3C 的 CSS RC 中對 table, col, colgroups 是怎麼規定的。 http://www.w3.org/TR/2004/CR-CSS21-20040225/tables.html#q4
也就是說，只有 border, background, width, visibility 這四個屬性才能套用在 col, colgroups 上面，用來將置中是不合標準的。
Mozilla/Firefox其實是個只支援CSS排版的瀏覽器, HTML效果都是靠預先定義的CSS rule來顯示。
碰巧這個是CSS不能完全替代HTML的其中一個問題，故目前Mozilla/Firefox都沒有支援。
其實問題Mozilla跟CSS工作組一直都在研究中，但暫未有一個可行的方案(CSS的Generated Content都有相似的問題，故Mozilla不支援，Opera支援的相當buggy)，詳細你可看bug 915(看看bug number就可以知道... 看似異常簡單的問題，已經持續了半個年代 Laughing )
至於為何CSS不草草的用text-align取代HTML的align等屬性，可看看CSS2.1作者的解說。

Hixie's Natural Log: The mystery of why only four properties apply to table columns

The answer to this question lies in another question: How would you implement it?

The colour of text is dependent on the 'color' property of its element. Unless specified, the 'color' property (basically) defaults to 'inherit', which means "take the value of the parent element".

So for some text in a cell, the colour is determined by the 'color' property of the cell, which is taken from the row, which is taken from the table, which is taken from the table's parent, and so on.

What about the column? Well, the column isn't one of the cell's ancestors, so it never gets a look-in! And therein lies the problem.

Now, while that explains why it doesn't apply in the current model, it doesn't actually explain why the model couldn't be changed a little. For example you could say that if a cell has no value set, it should inherit from the column instead of the row.

Unfortunately, you then run into two problems. The first is that in CSS, everything is always set. That isn't a huge problem, because you could always say that the initial value of certain properties was 'auto' or 'normal', and have that value Do The Right Thing when inherited. It wouldn't be pretty, but it could be done. (This is the approach I used to solve some similar problems in the CSS3 Generated and Replaced Content module.)

The second problem is rather more fundamental, and to explain it we'll take a look at the overall processing model for CSS.
Here is how CSS works, at a very high level:
   1. Parse the stylesheets and the document.
   2. For each element in the document:
         1. Decide which CSS rules apply.
         2. Perform the CSS cascade with those rules.
         3. Perform inheritance of properties if the result of the cascade is the keyword 'inherit' (or no specified value for inherited properties).
         4. Perform computations (turn 'em's into 'px's, etc). According to CSS2.1, the getComputedStyle() DOM method returns these values.
      At this point, every element has a value for every property ('display', 'color', etc).
   3. Lay out the document.
   4. Paint the document.
So why does it work in IE6? Well, it can do this despite what I said above because it doesn't support explicit CSS inheritance (the 'inherit' keyword), it doesn't support getComputedStyle(), and it doesn't support 'display: table-column' and the other table display types. In IE6, the model is probably more like:
   1. Parse the stylesheets and the document.
   2. For each element in the document:
         1. If it's a table, map out its structure.
         2. Decide which CSS rules apply.
         3. Perform the CSS cascade.
         4. Perform inheritance of properties, inheriting magically from table columns if the column isn't inheriting its style itself.
   3. Lay out the document.
   4. Paint the document.

3/27/2009

Mobile01 中華電信預計98年4月1日開放行動上網計時業務了...

http://www.cht.com.tw/CompanyCat.php?CatID=245&NewsID=1576&Page=NewsDetail
20小時型（限二日內使用）99元：2日內免費瀏覽網際網路與emome手機網共20小時
60小時型（限五日內使用）199元：5日內免費瀏覽網際網路與emome手機網共60小時

chunghe 的無名嘀咕 - 無名小站

另外還有本來的3天$250，七天$450，以及月租到月底不滿一月照比例算的方式

3/26/2009

Bespin and Canvas

Bespin and Canvas: Part 1
Bespin and Canvas: Part 2
Of Tabs and Performance

3/25/2009

HTML: Using the target attribute in a strict DTD?

The only thing you need to do is adjust your Document Type Definition:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" [ <!ATTLIST a target CDATA #IMPLIED> ]>

Or for XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" [ <!ATTLIST a target CDATA #IMPLIED> ]>

Of course, you could also just use a Transitional DTD.

The target attribute can be used on:

* a
* link
* area
* form

So if you want to use those elements a well, this means you should add the next lines to the definition:

* <!ATTLIST a target CDATA #IMPLIED>
* <!ATTLIST link target CDATA #IMPLIED>
* <!ATTLIST area target CDATA #IMPLIED>
* <!ATTLIST form target CDATA #IMPLIED>

Activating Browser Modes with Doctype

Modes for text/html Content
Quirks Mode
In the Quirks mode the browsers violate contemporary Web format specifications in order to avoid “breaking” pages authored according to practices that were prevalent in the late 1990s. Different browsers implement different quirks. In Internet Explorer 6, 7 and 8, the Quirks mode is effectively frozen IE 5.5. In other browsers, the Quirks mode is a handful of deviations from the Almost Standards mode.
If you are authoring new pages now, you are supposed to comply with the relevant specifications (CSS 2.1 in particular) and use the Standards mode.

Standards Mode
In the Standards mode the browsers try to give conforming documents the specification-wise correct treatment to the extent implemented in a particular browser.
Since different browsers are at different stages of compliance, the Standards mode isn’t a single target, either.
HTML 5 calls this mode the “no quirks mode”.

Almost Standards Mode
Firefox, Safari, Chrome, Opera (since 7.5) and IE8 also have a mode known as “the Almost Standards mode”, which implements the vertical sizing of table cells traditionally and not rigorously according to the CSS2 specification. Mac IE 5, Windows IE 6 and 7, Opera prior to 7.5 and Konqueror do not need an Almost Standards mode, because they don’t implement the vertical sizing of table cells rigorously according to the CSS2 specification in their respective Standards modes anyway. In fact, their Standards modes are closer to Mozilla’s Almost Standards mode than to Mozilla’s Standards mode.
HTML 5 calls this mode the “limited quirks mode”.

IE8 Complications
The lucky thing is that IE8 uses doctype sniffing roughly like other browsers if:

* There is no X-UA-Compatible HTTP header set by the author.
* There is no X-UA-Compatible meta tag set by the author.
* Microsoft has not placed the domain name of the site on a blacklist.
* An intranet admin has not placed the site on a blacklist.
* The user has not pressed the Compatibility View button (or otherwise added the domain to a user-specific blacklist).
* The site is not in the intranet zone.
* The user has not chosen to display all sites as in IE7.

» Web Developer Resume Screening :: CSS, JavaScript and XHTML Explained

Run-in should make the run-in element be the first line of the next sibling block level element, if it is before a block level element that is not floated or absolutely positioned. If the next sibling is positioned or floated, then the run-in element will be a block level element instead of appearing in-line.

IE treats a position like a z-index reset, so you have to declare position of static on the parent element containing the z-indexed elements to have them responsd to z-index correctly.

» XHTML v. HTML, Strict v. Transitional :: CSS, JavaScript and XHTML Explained

The difference between strict and transitional XHTML:
Transitional is a forgiving form of doctype.While you must code cleanly — properly nested lowercase tags — transitional allows deprecated elements and attributes to pass validation. The strict doctype is strict: deprecated elements and attributes will fail to validate under a strict doctype and may well display incorrectly as well.

For example, <p align="left"> and <center> will validate in transitional, but not in strict mode since the align attribute and the <center> element are both deprecated.

In XHTML, the elements need to be coded in a semantic manner. Tables and forms can not be included in paragraphs, but form elements, being inline elements, need to be contained within a semantic block level element, such as a paragraph or table cell.

» XHTML Deprecated Elements and Attributes :: CSS, JavaScript and XHTML Explained

target a

» CSS Best Practices :: CSS, JavaScript and XHTML Explained

* Specify units for non-zero values, but not for zero values.
* Don’t use quotation marks around paths/URLs when setting a background image or loading in an imported file
* Try to avoid applying padding/borders and a fixed width to an element. Rather, apply padding to the parent element.
- Because of IE 6 (and lower) box-model issues, if you apply padding to the parent element instead of the child element, IE will render the same as standards compliant browsers.
* Don’t use anchors, instead use ID’s.
- Less code with multi-purpose code. Instead of using <a name=”anchor”> give an id to the parent of where that anchor would fall. All ID’s need to be unique, but so do the named anchors, so you are actually saving code and avoiding the pitfall of the effects of a a:hover defined for actual links
* Sandbox your style declarations
- Limit the “reach” of style declarations by pre-pending the class name, such as #maincontent p{}.
* Organize your CSS file
- Start with clearing all default values, as mentioned above: this will reduce redundancy. Follow this by global styles. Lastly include section specific styles. For example, declare default element values. Next create sections of code for each section of your document. Next come the content sections which I generally divide into #header, #navigation, #maincontent and #footer. Include all the layout for the various elements for each of these id’s that are site global within each section

» DTD - The Document Type Declaration :: CSS, JavaScript and XHTML Explained

SitePoint » Making ‘IE6-friendly’ PNG8 Images

The problem is all the semi-transparent yellows and shadow grays that blended with the blues to create ‘inbetween colors’ have been rendered 100% transparent by IE6. Our pixels are either yellow or blue — not halfway between.

The Approach
While we’re never going to be able to reproduce the transparent shadow in IE6, we do need a way to generate a lot more of the yellow/blue blending colors along the edge. I’ve found the easiest way to do this is to bring a tiny slither of the background inside our yellow shape.

Matched corder colorsIn the diagram at the right, I:
1. First duplicated the main yellow shape on top of the original
2. Set its fill color to ‘clear’ so the original shape shows through
3. Set it’s border color to the background blue
4. Used the knife tool in Fireworks to break the new border into 4 separate lines. This allows me to color each border color separately.
5. Exported the graphic

Set the iframe SRC dynamically in JavaScript with setTimeout

Set the iframe SRC dynamically in JavaScript with setTimeout
http://stevesouders.com/hpws/iframes-src-js.php

The onload event doesn't fire until all iframe SRC requests are completed. To avoid this, set the iframe SRC dynamically in JavaScript with setTimeout. This page contains an iframe. The SRC is set with the same URL from Iframe SRC Blocks that takes 10 seconds to load. Notice how the onload time is only a few hundred milliseconds because it's not blocked by the iframe SRC.

Google design: The kids are alright « fox @ fury

Back when Irene Au was building the User Experience team at Yahoo, visual designers (VisDes) were often paired with interaction designers (Gooeys) and usability researchers (UER) and together they would tackle design problems at the product level. This kind of arrangement would have probably been more effective at Google as well. Hiring visual designers only to silo them together means the visual design team lacks the benefit of sufficient inroads in to the product teams the interaction designers have been working with for years. This makes your job impossibly hard, because what product team welcomes a design that is handed to them without their involvement?

3/24/2009

Balsamiq Mockups Home | Balsamiq

Balsamiq Mockups Home | Balsamiq

手繪風的執念：Balsamiq Mockups | William's Blog

本來覺得 Balsamiq Mockups 內建圖庫不太夠，不過最近發現有個網站 Mockups To Go 專門收集其他網友貢獻的圖庫，甚至連推文鈕、iPhone 觸控螢幕、分頁列、搜尋框等視覺元件都有，便利度大大提升

於取得免費版本，可以在這網頁得知：依照申請者的身分可以申請：

要獲得免費授權密鑰，您可以：

1. 如果公司有購買 Mockups 的軟體、JIRA 或 XWiki，可請詢問公司的 IT 管理員。
2. 如果你是非營利組織、慈善機構，開放原始碼開發人員），請發 mail 給 Mariah 簡單說明您的身分與相關資料，她會提供您一份免費的授權密碼。
3. 如果您是一位部落客/記者，請發 mail 給 Mariah 簡單說明您的身分與相關資料，她會提供您一份免費的授權密碼，以便您可以評估 Mockups 這套軟體。
4. 如果您願意在觀眾至少 15 人的環境中分享、介紹這套軟體，請發 mail 給 Mariah ，她會提供您二份免費的授權密碼，一個是你隨時在介紹活動中可使用的。
5. 如果你是高中老師，請發 mail 給 Mariah ，並提供學校名稱等資訊。
6. 針對大學學生和教授：該軟體不提供免費授權給大學師生，但可提供半價優惠。

供參考嘍。

3/23/2009

body{direction:rtl}

http://www.google.com/chrome?brand=CHMP&hl=ar
http://www.google.com/tools/dlpage/res/c/css/dlpage-rtl.css

新聞網站design

birdegg 拍攝的 businessWeek。
birdegg 拍攝的 newYorkTimes。

SoundManager 2: Javascript Sound For The Web

SoundManager 2 makes it easier to play sounds using Javascript.

By wrapping and extending Flash 8's sound API, SoundManager 2 brings solid audio functionality to Javascript.

Basic API Features (Flash 8)

* Load, stop, play, pause, mute, seek, pan and volume control of sounds from Javascript
* Events: onload, whileloading, whileplaying, onfinish and more
* ID3V1 and ID3V2 tag support for MP3s (title, artist, genre etc.)

3/21/2009

Theory - google-mobwrite - How MobWrite works. - Google Code

google-mobwrite - Google Code

MobWrite converts forms and web applications into collaborative environments. Create a simple single-user system, add one line of JavaScript, and instantly get a collaborative system.

Theory - google-mobwrite - How MobWrite works. - Google Code

Differential synchronization - MobWrite is a symmetrical system where the client and the server run exactly the same algorithms, sharing the work in keeping everyone in sync. Differential synchronization provides a fault-tolerant system that allows conflicts to be resolved automatically on a best-effort basis.

Diff, Match and Patch - At the core of both the client and the server is an efficient library that identifies local changes then merges remote changes into the local content. The matching algorithms are also used to restore the cursor or selection after remote changes are received.

Communication protocol - Synchronizations occur every few seconds, with the frequency automatically increasing during periods of activity and decreasing when idle. Data is transmitted across the web using Ajax requests, formatted to a custom protocol. This protocol is intended to be simple and flexible enough that new clients or servers may be created which integrate cleanly with MobWrite.

Text vs. Numbers - Two different conflict resolution strategies are used. Conflicting text changes are merged gently, attempting to incorporate the intention of all parties. While there exist no-win scenarios, MobWrite does the best job it can, with the understanding that an imperfect merge done in real time will be seen immediately by all affected parties. This is distinct from numeric data and enumerated types which are simply overwritten with the last selected value.

ViewSourceWith :: Firefox 附加元件

The main goal consists to view page source with external applications but you can also...
- open page source as DOM document, read faq
- open CSS and JS files present on page
- open images using your preferred image viewer (e.g. GIMP or ACDSee)
- open PDF links with Acrobat Reader or Foxit Reader or what you prefer
- edit textboxes content with your preferred editor and automatically see modified text on browser when you re-switch focus on it, this simplifies wiki pages editing, read faq
- open server side pages that generate the browser content, this simplifies web developer's debug, read server-faq
- open files listed in Javascript console. When editor open file the cursor can be moved to line number shown on javascript console, read js faq
For desperate cases you can add Microsoft IE to editor list.

http://apps.sourceforge.net/mediawiki/dafizilla/index.php?title=Vsw:index

3/19/2009

IE z-index bug

IE z-index bug - 在ie下多包了一個 position: relative 的 warpper 會造成 yellow box 的 z-index變成0.20，輸給 lime box 的 10，可以在 position:relative 的 element 上面加上 z-inex:20，變成20.10大於lime box 的 10

Basically the fact that the yellow box is wrapped in a relative positioned element should not effect the stacking order: the CSS specification clearly states that only positioned elements that have a computed z-index value other than 'auto' generate a new stacking context. The relative positioned element does not have a z-index value defined, so it should not influence the stacking order of it's child-elements.

It appears that in Internet Explorer (windows) positioned elements do generate a new stacking context, starting with a z-index value of 0, causing the lime-green box to appear above the yellow box.

This is a serious violation of the CSS specifications, causing headages and a lot of misunderstanding of what z-index really does.

3/17/2009

芙麗葉LA FOURVIERE - iPeen 愛評網-愛吃鬼的美食天堂-餐廳情報集散地 - 台北市松山區光復北路11巷97號(與吉祥路交叉口)

02-2742-3816
台北市松山區光復北路11巷97號(與吉祥路交叉口)

3/16/2009

YouTube - Gary Jules - Mad World (Donnie Darko Soundtrack)

http://www.webdevout.net

Web Development Tools - very good webdev resources

The W3C Link Checker, developed by the same organization that standardized the HTML and HTTP languages, is a free and open source web-based tool that will scan your website and report any broken links it finds, as well as other relevant information. You may specify an arbitrary number of pages deep to check.

The HTML Validator extension uses a local HTML validation tool to validate every page you visit, with the results displayed as an icon in the status bar and with a summary and highlights in the View Source window. This can help you conveniently identify errors in the markup without needing to consult the W3C validator every time. It's available for both Windows and Linux and has a very small performance impact.

Version 0.7.x uses a local install of HTML Tidy as its backend, which is less reliable than the W3C validator. However, as of version 0.8 (still in beta at this time of writing), there is an optional SGML mode that uses the same backend as the W3C validator and produces very accurate results.

Validity and Well-formedness

Introduction to validity
SGML documents, including XML documents, should come with a DTD, usually by using a simple doctype reference. The DTD informs the user agent as to which elements and attributes may exist in the document and where they may be. If an element occurs in the document at an unexpected place or has an unexpected attribute which violates the rules set in the DTD, this is called a “validation error”. A “valid” document is a document which conforms to the rules specified in the DTD, as well as the basic SGML parsing rules.
When you run a webpage through the W3C HTML Validator, it is checking for validity.

Introduction to well-formedness
XML was designed to have an extra set of rules called “well-formedness” rules. Well-formedness has nothing to do with the types of elements and attributes in the document. Instead, it is a basic syntax which all XML documents must follow. It deals with the individual characters which delimit tags, attributes, processing instructions, marked sections, character data, etc.

User agent requirements with XML
When a user agent (such as a web browser) parses an XML document, it is supposed to check for well-formedness. If it comes across any well-formedness error, the user agent immediately quits trying to parse the page, and it will sometimes display a parse error message instead.
Although user agents are supposed to check for well-formedness, they are not required to check for validity, and web browsers usually don't.

Regarding XHTML
XHTML was designed to be an XML version of HTML. However, for various reasons discussed in the Beware of XHTML article, most XHTML pages on the Web are not parsed as XML by most popular web browsers. Instead, they usually treat the page as if it were simply HTML with some odd unrecognized / characters and attributes here and there. This means that browsers won't check the XHTML page for well-formedness and, as the author, you can't expect the browser to give any indication of whether or not the page is well-formed.
Now, just because most popular browsers usually won't treat the page as XML, that doesn't mean nothing will. XHTML is supposed to be parsable as XML, and you should expect user agents to try to parse it as such (and many will). That means you have to make sure the document is well-formed.

Validity is not well-formedness
But what a lot of people don't realize is that it's possible for a document to be valid yet not well-formed. This issue comes up a lot more often than you may think, and is often completely overlooked until someone stumbles upon the fringe cases where something tries to parse the page as XML.
The following are examples of XHTML documents which are perfectly valid from an SGML point of view but not well-formed. Even though the W3C HTML Validator gives these pages a green light, they will completely fail to load in any XML parser. Notes: Most XHTML pages on the Web today are parsed as HTML most of the time, as explained in the Beware of XHTML article. Also, because Internet Explorer doesn't yet support XHTML parsed as XML, you'll have to use a different browser to see the problems.

3/13/2009

IE8 Browser Mode and Document Mode

Browser Mode: IE7 / IE8 / IE8 compability view
Document Mode: Quirks Mode / Ie7 standard / Ie8 standard
Discovering Internet Explorer Developer Tools

Testing Browser Modes
The Browser Mode menu lets you choose how Internet Explorer should report three important properties:
* User agent string: The value Internet Explorer sends to Web servers to identify itself.
* Version vector: The value used when evaluating conditional comments.
* Document mode: The value used to determine whether Internet Explorer uses the most recent behavior for CSS, DOM, and JScript operations or emulates a previous version of Internet Explorer for compatibility.

Three Browser Mode options exist, each modifying these values in different ways:
* Internet Explorer 7: In this mode, Internet Explorer reports a user agent, version vector, and document mode identical to those used by Internet Explorer 7. Use this mode to test how Internet Explorer 7 users experience your site.
* Internet Explorer 8: In this mode, Internet Explorer reports a user agent, version vector, and document mode to match the default Internet Explorer 8 behavior, which is the most standards-compliant available in Internet Explorer 8. Use this mode if you want to test how Internet Explorer 8 users experience your site.
* IE8 Compatibility View: In this mode, Internet Explorer 8 reports version vector, document mode, and user agent string as if it is Internet Explorer 7; however, the user agent string also includes a token indicating that the browser is really Internet Explorer 8. Use this mode to test how Internet Explorer 8 users experience your site if they've chosen the Compatibility View option.

Testing Document Modes

The Document Mode defines how Internet Explorer renders your page, but has no effect on the version vector or user agent string. By using this option in conjunction with the Browser Mode, you can quickly test which document mode you should use for your site. Three options exist:

* Quirks Mode: This behavior matches that of Internet Explorer when rendering a document with no doctype or a Quirks doctype. It's similar to the behavior of Microsoft Internet Explorer 5 and the Quirks mode behavior of Internet Explorer 6, and the same as the Quirks mode of Internet Explorer 7.
* Internet Explorer 7 Standards Mode: This behavior matches that of Internet Explorer 7 rendering a document with a strict or unknown doctype.
* Internet Explorer 8 Standards Mode: This behavior is the latest standards-compliant available in Internet Ex

Beware of XHTML

Sending XHTML as text/html Considered Harmful
Beware of XHTML

Web servers typically send this content type whenever the file extension is .html, and server-side scripting languages like PHP also typically send documents as text/html by default.
XHTML does not have the same content type as HTML. The proper content type for XHTML is application/xhtml+xml. Currently, many web servers don't have this content type reserved for any file extension, so you would need to modify the server configuration files or use a server-side scripting language to send the header manually. Simply specifying the content type in a meta element will not work over HTTP.
When a web browser sees the text/html content type, regardless of what the doctype says, it automatically assumes that it's dealing with plain old HTML. Therefore, rather than using the XML parsing engine, it treats the document like tag soup, expecting HTML content. Because HTML 4.01 and simple XHTML 1.0 are often very similar, the browser can still understand the page fairly well. Most major browsers consider things like the self-closing portion of a tag (as in
) as a simple HTML error and strip it out, usually ending up with the HTML equivalent of what the author intended.

A Null End Tag is a special shorthand form of a tag that allows you to save a few characters in the document. Instead of writing <title>My page</title>, you could simply write <title/My page/ to accomplish the same thing. Due to the rules of Null End Tags, a single slash in an empty element's start tag would close the tag right then and there, meaning <br/ is a complete and valid tag in HTML. As a result, if you have <br/> or <br />, a browser supporting Null End Tags would see that as a br element immediately followed by a simple > character. Therefore, an XHTML page treated as HTML could be littered with unwanted > characters.
This problem is often overlooked because most popular browsers today are lacking support for Null End Tags, as well as some other SGML shorthand features. However, there are still some smaller user agents that properly support Null End Tags. One of the more well-known user agents that support it is the W3C validator. If you send it a page that uses XHTML self-closing tags, but force it to parse the page as HTML/SGML like most user agents do for text/html pages, you can see the results in the outline: immediately after each of the self-closing elements, there is an unwanted > character that will be displayed on the page itself.

This XHTML document is well-formed and valid. However, the additional XML features are only handled correctly when it is sent as application/xhtml+xml. When handled correctly, this document should contain a fully formatted MathML equation and an SVG image (for browsers that support those technologies).
Differences in XHTML handling - Example 2

Centering Block-level Content With Unknown Width

3/12/2009

http://www.boston.com/bigpicture/

toread

High Performance Web Sites :: Coupling async scripts
High Performance Web Sites :: User Agents in the morning
High Performance Web Sites :: John Resig: Drop-in JavaScript Performance

John Resig - Degrading Script Tags

More Accessible YUI Grids Layouts with ARIA Landmark Roles » Yahoo! User Interface Blog

Using Landmark Roles

Of all the roles defined in the ARIA Specification, the Landmark Roles are among the easiest to implement since they don’t require JavaScript for keyboard support or state management. Landmark Roles are applied to an element using the role attribute and can be used to improve the semantics of any section of a Grid. For example, to declare a section of a Grid as navigation, simply set the role attribute to a value of “navigation”:
<div class="yui-b" role="navigation">
Presently the ARIA Specification defines seven different Landmark Roles:

* application
* banner
* complementary
* contentinfo
* main
* navigation
* search

insertRow Method (TABLE, TBODY, TFOOT, ...)
Creates a new row (tr) in the table, and adds the row to the rows collection.

Syntax

oTR = object.insertRow( [iIndex])

Parameters

iIndex Optional. Integer that specifies where to insert the row in the rows collection. The default value is -1, which appends the new row to the end of the rows collection.

Return Value

Returns the tr element object if successful, or null otherwise.

Remarks

The preferred technique for inserting a row is to add the row at the end of the rows collection. It is faster to add a row at the end of a table than somewhere in the middle. To add a row at the end of the collection, specify the -1 value, or the length of the rows collection minus 1.

Example

This example uses the insertRow method to add a row to the table.

myNewRow = document.all.myTable.insertRow()

3/10/2009

overwrite dialog cancel function

http://yuiblog.com/sandbox/yui/v270/examples/container/conditional-close.html


oDialog.cancel = function () {
    if (window.confirm("Are you sure you want to close this Dialog?")) {
        // Call the original implementation of the cancel method
        YAHOO.widget.Dialog.prototype.cancel.call(this);  
    }
};

AutoComplete.prototype._onContainerMouseover


YAHOO.widget.AutoComplete.prototype._onContainerMouseover = function(v,oSelf) {
    var elTarget = YAHOO.util.Event.getTarget(v);
    var elTag = elTarget.nodeName.toLowerCase();
    while(elTarget && (elTag != "table")) {
        switch(elTag) {
            case "body":
                return;
            case "li":
                if(oSelf.prehighlightClassName) {
                    oSelf._togglePrehighlight(elTarget,"mouseover");
                }
                else {
                    oSelf._toggleHighlight(elTarget,"to");
                }
            
                oSelf.itemMouseOverEvent.fire(oSelf, elTarget);
                break;
            case "div":
                if(YAHOO.util.Dom.hasClass(elTarget,"yui-ac-container")) {
                    oSelf._bOverContainer = true;
                    return;
                }
                break;
            default:
                break;
        }
        
        elTarget = elTarget.parentNode;
        if(elTarget) {
            elTag = elTarget.nodeName.toLowerCase();
        }
    }
};


YAHOO.widget.AutoComplete.prototype._onContainerMouseout = function(v,oSelf) {
    var elTarget = YAHOO.util.Event.getTarget(v);
    var elTag = elTarget.nodeName.toLowerCase();
    while(elTarget && (elTag != "table")) {
        switch(elTag) {
            case "body":
                return;
            case "li":
                if(oSelf.prehighlightClassName) {
                    oSelf._togglePrehighlight(elTarget,"mouseout");
                }
                else {
                    oSelf._toggleHighlight(elTarget,"from");
                }
            
                oSelf.itemMouseOutEvent.fire(oSelf, elTarget);
                break;
            case "ul":
                oSelf._toggleHighlight(oSelf._elCurListItem,"to");
                break;
            case "div":
                if(YAHOO.util.Dom.hasClass(elTarget,"yui-ac-container")) {
                    oSelf._bOverContainer = false;
                    return;
                }
                break;
            default:
                break;
        }

        elTarget = elTarget.parentNode;
        if(elTarget) {
            elTag = elTarget.nodeName.toLowerCase();
        }
    }
};

http://www.google.com.tw/extern_js/f/CgV6aC1UVxICdHcrMAo4DUADLCswDjgELCswFjgELCswFzgBLCswGDgDLCswJTjJiAEsKzAnOAAs/cqsJWGrc6j0.js

* (o.length > 0 ? X: N)()
* (new Image).src = "http://" + K + "/generate_204";
*


    g && window.setTimeout(function() {
        j();
        for (var a = 0; a < f.length; ++a) if (h && h[a]) f[a].call(null, h[a])
    },
    0);


window.setTimeout(function() {
    var xjs = document.createElement('script');
    xjs.src = '/extern_js/f/CgV6aC1UVxICdHcrMAo4DUADLCswDjgELCswFjgELCswFzgBLCswGDgDLCswJTjJiAEsKzAnOAAs/cqsJWGrc6j0.js';
    document.getElementsByTagName('head')[0].appendChild(xjs)
}, 0);

http://www.google.com.tw/extern_js/f/CgV6aC1UVxICdHcrMAo4DUADLCswDjgELCswFjgELCswFzgBLCswGDgDLCswJTjJiAEsKzAnOAAs/cqsJWGrc6j0.js


 google.log = function(a, d) { (new Image).src = "/gen_204?atyp=i&ct=" + a + "&cad=" + d + "&zx=" + google.time()
    };


    google.xhr = function() {
        var a = null;
        if (window.XMLHttpRequest) try {
            a = new XMLHttpRequest
        } catch(d) {} else if (window.ActiveXObject) for (var b = 0, c; c = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"][b++];) try {
            a = new ActiveXObject(c);
            break
        } catch(d) {}
        return a
    };


    function h(a, d) {
        var b = document.defaultView && document.defaultView.getComputedStyle(a, ""),
        c = b && b.getPropertyValue(d);
        return document.defaultView && b && typeof c == "string" && parseInt(c, 10)
    }
    google.getHeight = function(a) {
        return h(a, "height") || a.offsetHeight
    };
    google.getWidth = function(a) {
        return h(a, "width") || a.offsetWidth
    };

3/09/2009

Jennifer Semtner.com :: Web Designer / Developer » Blog Archive » Extending CSS Spriting


.menu-about { width: 106px; height: 29px; position: relative; top: 0; left: -293px; }
.menu-about img { position: absolute; clip: rect(0 399px 29px 293px); }


<div class="menu-about">
     <img class="transparent_png" src="http://www.jennifersemtner.com/wp-content/uploads/2008/12/company-menu.png" alt="About" title="About Us" width="611" height="39" /></div>

FlexDojo: “IE8 Compatibility Mode carries over the "darkened PNG" issue” - Please vote on my post!!!

google tweakpng. download tweakpng. run program. remove gamma. save. no dark png issue in ie. or purchase PNGOUTWIN and just drag and drop all ur pngs at once to fix them.

JS Quicktags | alexking.org

JS Quicktags | alexking.org
Example Page
download


function insertAtCursor(myField, myValue) {
  //IE support
  if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
  }
  //MOZILLA/NETSCAPE support
  else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos)
                  + myValue
                  + myField.value.substring(endPos, myField.value.length);
  } else {
    myField.value += myValue;
  }
}

// calling the function

insertAtCursor(document.formName.fieldName, 'this value');

Introduction - In search of the One True Layout

3/06/2009

[遊戲介紹]狼人Werewolves of Miller's Hollow @ 桌遊地圖室 :: 痞客邦 PIXNET ::

進入黑夜
1.丘比特睜眼，指定任意兩個人為戀人，然後閉眼。
2.主持人繞場一周，輕輕拍打到指定為相戀的兩個人。記住要繞滿一圈。
3.戀人睜眼，相互認識。
4.狼人睜眼，互相認識，並決定要殺誰
狼人殺人時候，小女孩可以偷看。
但是一旦小女孩被狼人看見，馬上作為本輪死者>
如果狼人已經決定了他們要殺的人，那麼，由小女孩代替死者。狼人閉眼。
5.目擊者睜眼，確認任意一個人的真實身份（但不能知道戀人關係）。目擊者閉眼。
6.巫師睜眼，主持人示意巫師狼人殺的人，巫師可以決定是否使用魔法將他救活。
（可以救自己）。巫師同時如果確信那個人是狼人，
也可以在任意一輪黑夜的此時選擇將他殺死。

PNG-8 that acts like PNG-24 without Fireworks | commadot.com

Ok, the instructions on the site are pretty clear, but I will repeat them just in case.

1. In Photoshop save your files with alpha transparency as PNG-24 files. Test in a modern browsers.
2. Download PngQuant (Tested) or the newer version (I didn’t try this one) and put the .exe file in your c:\windows\system32 folder. Also, there is a GUI you could use (untested) called Manfred.
3. Put the PNG-24 files in a folder like c:\png-transform
4. Run a command prompt and type: pngquant 256 filename.png
5. This will create new files in the same directory that are PNG-8 but act like PNG-24 in a modern browser. These look pretty good in IE6. (See below)

pngquant Home Page

pngquant is a command-line* utility to quantize and dither 32-bit RGBA PNGs down to 8-bit (or smaller) RGBA-palette PNGs, usually with a significant reduction in file size. (Other PNG image types, even colormapped images, may also be processed, but they will first be expanded to RGBA, which isn't the most efficient way to do so.) This is the same technique used for many of the images on the Miscellaneous Transparent PNGs page, and the results are often indistinguishable from the original, truecolor PNG images.

Ajaxian » Using Polygonal CSS for imageless tooltips and more

Ajaxian » Using Polygonal CSS for imageless tooltips and more
tooltip design example

Ajaxian » Using Polygonal CSS for imageless tooltips and more

Ajaxian » Using Polygonal CSS for imageless tooltips and more
tooltip design example

3/05/2009

API: tools YAHOO.Tools DavGlass

/JavaScript|Regex/ : Flagrant Badassery

3/03/2009

tabview

orientation “top” The orientation of the Tabs relative to the
TabView. (“top”, “right”, “bottom”, “left”)

Nicole Sullivan’s Object Oriented CSS

Nicole Sullivan’s Object Oriented CSS

http://wiki.github.com/stubbornella/oocss
Two main principles
1. Separate structure and skin
2. Separate container and content

10 Best Practices
1. create a component library
2. Use consistent semantic styles
3. Design module to be transparent on the inside
4. Be flexible
5. Learn to love grids.
6. Minimize selectors.
7. Separate structure and skin.
8. Separate container and content.
9. Extent Objects by applying multiple classes on an element.
10. Use reset and fonts from YUI

9 Pitfalls
1. Location dependent styles.
2. Avoid specifying what tag a class applies
3. Avoid IDs to style inside the main content areas.
4. Avoid drop shadows and rounded corners over irregular backgrounds
5. Don't sprite every image together (unless you has very few pages)
6. Avoid height alignment.
7. Text as text, not as images.
8. Redundacy
9. Avoid premature optimiaztion

3/02/2009

Align List Items Horizontally with CSS ... | ruzee.com - Steffen Rusitschka

Align List Items Horizontally with CSS ... | ruzee.com - Steffen Rusitschka
Cross Browser display:inline-block
http://www.tjkdesign.com/articles/css-layout/no_div_no_float_no_clear_no_hack_no_joke.asp

For IE Win, we use display:inline;zoom:1;
IE Win does not do "inline-block" on block-level elements, so the trick is to use display:inline + zoom:1 instead. Note that if we use zoom it is because we need these elements to have layout (read on having Layout), but we cannot rely on the width declarations since we are styling the LIs as inline elements (which turns the width "trigger" off).

say no to float: use inline-block

Sometime we let inline elements float only for being able to set the width/height of the element. But by setting inline-block to elements, we can achieve same goal in ie6/ie7/ff3/safari (except ff2, use display: -moz-inline-stack instead). Ie6/Ie7 accepts display:inline-block only for inline elements. For block level elements, zoom:1 and display: inline can mimick the disply:inline-block. ex:


#inline-element{display:inline-block, width:10em}
#block-element{width:10em; zoom:1; display:inline}
#all-elements-in-all-browsers {display:inline-block; width:10em; zoom:1; *display:inline}

Cross Browser Support for inline-block Styling

http://chunghe.googlecode.com/svn/trunk/experiment/inline-block/inline-block-to-replace-float-inline-elements.htm

IE supports inline-block, but only for elements that are natively inline. So, if you really want to use inline-block, you’re restricted to spans and strongs and ems, when a list or paragraph would perhaps make more semantic sense (and also degrade more nicely for non-CSS users.)

However, if you trigger hasLayout on a block element, and then set it to display:inline, it magically becomes an inline-block in IE! By using the *property hack (which I love so well), you can hide the display:inline from all non-IE browsers effortlessly.

hasLayout

IE hasLayout - hasLayout.net - by Zoffix Znet - 這一篇把 hasLayout 解釋的非常清楚

MSIE has quite dated rendering engine (not surprising, as IE is based on Mosaic). In old tabular times, almost any element (except inline content) was a box. There was no way for content to leak from containing table cell, or for table cell to leak out of table...

Many years have passed, and Microsoft began adapting archaic Trident engine to make use of CSS. However, CSS changes the fundamental assumption that old engine was based on - the one that "anything significant" is a rectangle that contains all its content. CSS allows content to overflow out of container. This may happen when content is floated, or if content is too tall/wide to fit inside constrained box.

Where Did It Come From?
Microsoft's "genius" coders decided to fix their ancient engine in a rather bizarre way. And that is where the hasLayout "property" comes from. Every element has hasLayout set to either true or false. If it is set to true - element is a box that is responsible for rendering itself. Therefore, element would be expanded to contain overflowing content, such as floats or very_very_long_words_without_any_breaks. If hasLayout is set to false - element does not render itself, and instead hopes that some ancestor with hasLayout set will do the job for it. This is where the majority of IE bugs come to life.

The following properties/values give an element layout:

* skip list
* position: absolute
* float: left or right
* display: inline-block
* width: any value other than auto
* height: any value other than auto
* zoom: any value other than normal (see description below)
* writing-mode: tb-rl (see description below)

As of IE version 7, few new properties give "layout":

* skip list
* overflow: hidden or scroll or auto
* overflow-x: hidden or scroll or auto
* overflow-y: hidden or scroll or auto
* min-width: any value other than auto
* max-width: any value other than auto
* min-height: any value other than auto
* max-height: any value other than auto

Setting display: inline-block and then reverting it back to the original display property value inside another rule set does not remove layout, this trick can be used to give layout without the use of conditional comments when you cannot use other properties. Here is how this trick would look like: