2009 2009年 07月 27日

用戶代理樣式表:在谷歌瀏覽器的神秘空間

昨天,像所有其他的“土撥鼠日”,我是工作在一些CSS /無表格佈局。 所有在IE 7,FF 3和Chrome,直到突然,我看到一些聯合國忽略利潤率僅在谷歌Chrome。 雖然很奇怪,武俠,這是一些新的bug /問題我來到accross,終於有一些我的平凡工作中的香料。 悲傷(但很好)有固定探頭幾分鐘內...

基本上,它看起來像谷歌Chrome忽略我的CSS復位(利用margin:0px)。 它實際上是由於用戶代理樣式表(-webkit的填充啟動:40px)。 因此,解決辦法是復位設置填充樣式:0,行為不端的元素。
發生的任何元素,以防止這個問題的一個好方法是使用如下一個全球性的CSS休息

* {保證金:0;填充:0;}

什麼是用戶代理樣式表(規格)?
以下摘錄取自http://meiert.com/en/blog/20070922/user-agent-style-sheets/ ,後續環節,讀取用戶代理樣式表的更多信息

的CSS介紹說,每個用戶代理(UA,往往是一個'網頁瀏覽器“或”Web客戶端“)將有一個默認的樣式表,提出在一個合理的文件的想法 - 但可以說是平凡 - 方式。 CSS 2的表示,符合用戶代理必須申請1默認樣式表的行為好像他們做的和,1用戶代理的默認樣式表應該呈現方式,滿足文檔語言的一般介紹期望文檔語言的元素;的CSS三是可能是相同的想法。

由於CSS規範離開它是否使用默認顯示一個“真實”的樣式表或不實現,它不令人吃驚的是,你不覺得在每一個瀏覽器的安裝文件夾的默認樣式表。 微軟的Internet Explorer以及歌劇不同,例如(據我所知),Gecko的瀏覽器如Firefox和Netscape Navigator的(看“html.css”),但也Konqueror的,而簡單地理解他們的默認樣式。


2009 03月 24日 二零零九年

禁用=“true”和禁用=“假”一樣嗎?

這的老學校,但像往常一樣,它是我的記憶中補充...
所以被禁用=“true”和禁用=“假”相同嗎?
...不要相信! 多數民眾贊成的方式是......這裡是一些簡單的解釋...
“禁用”是任何形式的元素/字段的屬性,因此可以接受任何價值,其性質。

只要這個屬性是目前,該元素將被禁用,不管它的價值。 例如。
<input type="text" value="This是disabled" disabled>
<input type="text" value="This是disabled" disabled="disabled">
<input type="text" value="This是disabled" disabled="true">
<input type="text" value="This是disabled" disabled="false">

上述所有將本表格字段“已禁用”。

根本就沒有提供屬性“禁用”保持現場“禁止”......像下面

<input type="text" value="This是不disabled"的/>

記住“ 任何殘疾人士的屬性值(或沒有價值),瀏覽器將使其禁用 ”。 為了讓我們的頭腦W3C的事情說清楚,建議我們使用禁用=“禁用”,在這些情況 ​​下。

這是區別雖然我們在JavaScript中使用這個屬性時...

document.form.element.disabled = / /該元素將被禁用
document.form.element.disabled = FALSE; / /該元素將啟用

上述論點也適用於這些屬性和元素:

  • (單選按鈕,並選中複選框)
  • 選擇(選項)
  • nowrap(TD)

2009 2009年 03月 22日

SevenUp! 鼓勵世界擺脫IE6的!

谷歌開始一個動作提示人們傾倒的IE6與彈出頁面加載竊聽IE6的用戶... ...可能不是一個很好的主意......但UI開發人員,我要加入這個樂隊馬車......少了一個瀏覽器為我擔心......對不起,這是自私的! 但我這個JavaScript ...(嘗試在IE6此頁)...
嘿! 亮......看到它是一個展示 JavaScript的力量 ...... 它甚至可以帶來一個巨大的(或曾經是)

所以...幫助擺脫一行的JavaScript IE6的世界!

http://code.google.com/p/sevenup/


2009 2009年 03月 19日

打倒IE6的,其對時間!


與其他瀏覽器,從明天! (IE8的明天beta狀態出來)...給予其非常高的時間IE6的龍由於觀音死亡...美國站在我們IE6的秋天

“IE6的是新網景4。 需要支持IE6的黑客正越來越多地被視為多餘的運費。 如Netscape 4在2000年,IE6是被認為是阻礙網上。“

傑夫Zeldman,大師的標準

同時,對於那些將被淹沒呼籲打破在IE8的CSS佈局像我一樣,這裡是老左右/修復工作,使用元標籤(META HTTP-EQUIV =“X-UA-Compatible”的),你可以嘗試...

不當行為:IE8的CSS佈局破損(針對在IE8中使用Meta標籤的瀏覽器版本)


2009 3月 7 二零零九年

在Javascript中調用多個Windows的onload函數

下面,我有挖,因為情況commaned它的另一個小的Javascript弄虛作假的peice。 在我的網站之一,我有這種情況,在那裡我有兩次實施“windows.onload”。 將來到像我這樣的經驗的心(我必須誠實地說,因為我一直在使用JavaScript框架和圖書館,我福爾戈我自己...傷心,但真正做簡單的事情)的第一件事,就是下面的方法...

的window.onload = onloadfn1;
的window.onload = onloadfn2;
的window.onload = onloadfn3;
等等......

抱歉地說,但是,這不會工作,不想討論太多的Javascript執行科學......但根據我最近的經驗,只有最後一個函數(onloadfn3)會生病實際上得到執行。

在正常情況下,與礦(後來,我談一點),你可以做下列之一執行複式的onload函數....

或類似這樣的東西

函數doOnLoad(){
         onloadfn1();
         onloadfn2();
         onloadfn3();
 }
的window.onload = doOnLoad;

對於我目前的狀況,我不能使用上述...
為什麼我需要調用windows.onload兩次,而不是在一個單一的onload函數調用兩個函數? 這裡是快看看我的問題陳述...

“我的網站頁面結構像WordPress主題.... 即有一個共同的header.php文件,包括Footer.php獲取到所有的網站頁面。 那裡是中Footer.php的onload的功能implementaion做一些常見的onload函數。 有幾頁,需要自己的OnLoad的東西,除了共同onload函數所做的。 如果我給回調函數直接在window.onload處理程序,它會隨著騎在Footer.php以前分配的回調“

.... 是我的問題的理解 :)

好吧! 有幾個解決方案,我沒有找到。 他們都非常相似,主要由西蒙·威利森(給出一個解決方案implementions http://simonwillison.net/2004/May/26/addLoadEvent/ )...

解決方案:

只是這段JavaScript代碼添加到網站...

功能addLoadEvent(FUNC){
     oldonload = window.onload的;
     (typeof運算的window.onload ='功能'){
       的window.onload =功能
     }否則{
        =(){
            (oldonload){
                   oldonload()
           }
          函數()
        }
    }
 }

並調用,而不是通常“windows.onload”

 addLoadEvent(FunctionToRunOnPageLoad);
 addLoadEvent(函數(){
 / *更多的代碼運行在頁面加載*
 }); 

這個代碼片斷的優勢...
1。 首先,它可以讓你有多個windows.onload事件,呼籲從你的代碼的單獨部分,不overridding以前的定義
2。 這實在是不顯眼的。 它可以被放置在與其它腳本文件中或在一個單獨的文件。
3。 它的工作原理window.onload的,即使已經設置。


2009 2月 18日 二零零九年

使用CSS的圖像添加陰影效果

另一個快速嘖嘖。 下面是一些簡單而漂亮的使用CSS的權力,但困難concieve(肯定不是我)開始。 添加陰影效果,對於我們許多人可能是一個大蛋糕peice,使用一些圖像編輯工具,如Photoshop ANF煙花等
為什麼,我選擇了使用CSS的下拉陰影的原因是,通常在創建網頁設計/ HTML應用程序,要求保持迭代。 我的意思是在現有的網站與許多圖片,像顯示freinds列表或圖片庫的,將很難重新處理整個負載已經卸載已添加或刪除的陰影圖像,該問題。
所以,如果你做了一些前瞻性思維,而創造的HTMLS添加這些額外的部門或通常的情況是,你有一個循環邏輯在XSL,PHP生成這些圖標/縮略圖。 JAVA或任何其他的編程/腳本語言,你可以隨時添加,然後僅僅是為客戶不斷變化的需求,使用CSS的顯示屬性,這些陰影顯示和隱藏的問題...我沒有帶這種前瞻性思維在此之前......但ahev現在開始!

在下面的例子中,原始圖像是無陰影和應用需要的dropshadows! 僅此外,我已經走了一點點額外的,使用約我剛才圖坦卡蒙過關(Well!這些可能是最短的各種教程,所以它是唯一的理由叫他們“嘖嘖”的), 使用CSS clip屬性為炫耀

原始圖像

original_image

CSS陰影效果結果
css_dropshadow_results
查看演示 | 下載源文件


2009 2月 17日 二零零九年

Understandng的CSS clip屬性

我為什麼要明白這一點嗎?? ... Humm!!!

CSS的作家中的大多數人都同意,CSS Clip屬性可能是最未使用CSS屬性之一。 這是我的真實,是最幸福的忽視它,直到我開始修改的MooTools的兩個旋鈕(PIN)滑塊組件(帶範圍指示器)

從一個組件用戶有一個很好的建議,修改Slider組件使用裁剪圖像(對可變寬度師)視野下,以表明滑塊範圍。 就這樣來到我的時間來輸入的樂趣,但聯合國包機(我當然)的CSS Clip屬性的水域。

好吧! 它可以是多麼困難? 沒有太多... YES和NO。 使用CSS Clip屬性的語法是很正直的,但的含義/ usuage,是有點croocked。 一個像我的記憶中,每次我坐下來返工我滑塊腳本...我有隨時注意​​這個剪輯屬性的用法,要提醒自己,我在我的腳本創建的邏輯.... 因此! 認為筆下來,希望記住它的未來(也似乎誰的利益猛然一驚CSS clip屬性)

什麼是CSS的剪輯呢?

剪輯的視覺效果模塊的CSS 2.1的一部分。 簡而言之,它的工作是正在修剪的對象上放置一個可見的窗口,因此裁剪圖像,而不必創建額外的文件(我已經把滑塊組件,以更好地利用此功能創建縮略圖 :)

使用CSS Clip屬性,你可以創建一個使用矩形形狀的裁剪。 需要像其他許多CSS屬性(如利潤率,填充等),使用矩形,四個坐標上,右,底部,左(TRBL)。 這個屬性croocked性質的反映,當你仔細一看,剪輯是如何計算的裁剪區域使用這四個坐標(大腦發送到折騰了一會兒)。 現在你混淆底部開始從頂部,並有權從左邊開始。 :) 你明白我說的話嗎? .... 因此,這個職位...

這有點混亂,可以很容易地消失了,用這CSS剪輯/ Rect屬性的視覺解釋如下!!!

CSS剪輯需求

我們已經開始的任務是剪輯成方正尋找圖像下面的縮略圖(還廣角圖像)

original_image clip_demo
原Thumbnal /圖像 Sqaure Thumbmail剪輯要求

CSS剪輯結果

clip_results

查看演示 | 下載源文件


2008 2008年 12月 25日

載入JavaScript的動態

有時保持pageweight下來......我們我們的腳本分割成片段......這些JavaScript片段,可以裝載在有需要時(事件或點擊一個鏈接或按鈕等)。

載入JavaScript的動態很簡單,相當平直向前如下...

= “text/javascript” > < 腳本 類型 =“文本/ javascript”>
功能loadNewScript(源){
VAR = document.createElement方法(“腳本”)
s.setAttribute('型','文本/ javascript“);
s.setAttribute('src'中,源);
瑭插綋銉(S);
}
</ SCRIPT>

你可以有以下調用鏈接在身體的任何地方,或者你可以有這個腳本文件本身“的onLoad”...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a ><a href =“JAVASCRIPT:loadNewScript(”myDynamicScript.js);“>負載動態腳本</ A>

<body onload="loadNewScript('myDynamicScript.js');">


2008 2008年 12月 17日

不當行為:IE8的CSS佈局破損(針對在IE8中使用Meta標籤的瀏覽器版本)

如果你是CSS的人,你想知道的痛苦,在獲得工作的跨瀏覽器的佈局。 IE8是我們開發的工程中的又一扳手。 anywaz! 如果你打這個問題時,像我一樣昨天,你完全工作在IE7的CSS(或更早)和Firefox突然開始扔在IE8發脾氣,試試這個...很好,這似乎是解決問題的那一刻我....

使用meta聲明,我們可以指定我們想IE8的使用的渲染引擎。 因此,強制IE8的渲染IE7 ...插入文檔的頭部以下Meta標籤: -

<meta http-equiv="X-UA-Compatible" content="IE=7"

IE瀏覽器默認情況下,元將是: -

<meta http-equiv="X-UA-Compatible" content="IE=8"
這將使IE8的渲染頁面,使用新的標準模式。

如果需要,此語法可以用來容納其他瀏覽器如下:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4"


更多關於文檔類型:

如果你不熟悉的動物,被稱為“DOCTYPE”排序...這裡是一些快速閱讀
什麼是文檔類型? 什麼是瀏覽器怪癖嚴格模式?
設置在XSL中的DOCTYPE

為深入了解更多有關文檔類型,嘗試訪問這些鏈接...
除了 ​​一個列表:有了正確的DOCTYPE,修復您的網站!
除了 ​​一個名單:超越的DOCTYPE:Web標準,向前兼容和IE8

注:雖然我們很多的HTML / CSS的人都被忽略在我們的文件重要性的DOCTYPE decleration的,設置正確的DOCTYPE,通常是跨瀏覽器的問題的答案。


2008 2008年 12月 9日

簡單的傳送帶分頁使用的是MooTools

隨著各種有旋轉木馬,以及MooTools的很多,我還是決定寫我自己的傳送帶類,一些很好的理由
1。 想要一個尋呼功能(能夠跳到一個特定的幻燈片/傳送帶一步)。
2。 要安置的左,右按鈕/鏈接的自由,我曾經請。
3。 在幻燈片的步驟更多的控制權。

我設法創建一個新的傳送帶,具有上述特點如下...隨意提出的任何修改,你會需要!!!

我的例子看起來像... [ 查看演示 ]
隨著尋呼Mootools的傳送帶

觀看演 ​​示 尋呼版本1.0下載MooTools的旋轉木馬 (下載1980年代)


1。 傳送帶尋呼

你可以很容易地添加分頁到您的轉盤,只需通過設置分頁標誌,這是最後parater通過創建的真實MooCarousel的實例(要分頁)或false(donot想分頁)。

VAR carousel1 =,新MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft',的carousel1_moveright',c_ns,c_sss, 真正 ); / / NS =幻燈片,SSS =滑動步長

當然你可以通過修改它們的CSS改變外觀這些尋呼achors的N-覺得你請。

carousel_paging {文本對齊:權利;保證金:5PX 10px 0 0;}
。carousel_paging電流,carousel_paging頁{概要:無;寬度:。均為15px;高度:均為15px;線高度:均為15px;文本對齊:中心;顯示:塊;浮動:左;背景:#D8D8EB;保證金:0 1px的0;文字裝飾:無;}

。carousel_paging:懸停,carousel_paging當前{背景:#4D4D9B;顏色:#FFFFFF;}。

好吧! 雖然是一個小問題,如果設置分頁錨,然後將得到產生總是在旋轉木馬組件。 我想動態,以及,但只是為了讓吹出來的比例腳本,我決定跳過它。
但你知道一點點的JavaScript,你可以很容易地修改在MooCarousel類傳呼代碼,請您的需求。

2。 訂製左,右的圖標

只需打的CSS,你可以改變位置,圖像或任何displat財產的左,右按鈕。 是能夠改變的“左”和右的buttoms存款是我的權利我傳送帶類的真正原因。
以來這個MooCarousel類,接受這些按鈕的ID,你可以把這些按鈕在頁面上的任何地方,如果你願意,它並不一定要在元素層次,因為在我的例子。

VAR carousel1 =,新MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft',的carousel1_moveright',c_ns,c_sss,真正);

的CSS
carousel_container_l,carousel_container_r {保證金:50像素0 0 0;位置:親屬;寬度:23px;高度:20像素;浮動:左;光標:指針;}

carousel_container_r {背景位置:0-38px;}

carousel_container_l {背景位置:0-58px;}

3。 自定義幻燈片步驟

這是什麼意思我自定義幻燈片的步驟?
大多數傳送帶滑動完整的可視窗口。 所以說,你有四個項目(如我上面的樣品),它會滑動的所有四個項目。 有了這個轉盤組件,通過幻燈片的數量和您選擇的步長。

VAR carousel1 =,新MooCarousel('carousel1_wrapper','carousel1_items_container','carousel1_moveleft',的carousel1_moveright',c_ns,c_sss,真正);
c_ns =數量的幻燈片,c_sss =滑動步長

此外,在我的例1,我calcuted滑動步長,基於邏輯的地方,我知道數量的項目,每個項目的寬度和已後,我的CSS在每個項目的利潤率。

狂歡/ * 1 * /

c1_w = 92; / /狂歡項目寬度

VAR c1_n = 10;的比較狂歡項數/ /合計

VAR c1_pp = 4 / /比較狂歡項目每頁數

c1_marginFactor = 51;

c1_sss VAR = c1_w * c1_pp; / / SSS =滑動步長

VAR c1_ns = parseInt(((c1_w * c1_n)/ c1_sss)+0.5)/ / NS =幻燈片

c1_sss + = c1_marginFactor的; / / SSS =滑動步長,51利潤


要求:MooTools 1.2的

觀看演 ​​示 尋呼版本1.0下載MooTools的旋轉木馬 (下載1980年代)


NDK的家 | 表達它 表示唇齶裂 表示Penmenship 表示敬畏 表達自己