2011 2011年 7 7日

CSS破解的問題

讀了一些博客認為這是很好的未來文獻目錄...... 也可能是一個重要的面試問題,你會問有一天......

寫一個CSS的片段將顯示在新的瀏覽器,在舊的瀏覽器款有藍色,紅色,在IE6和黑色的綠色IE7中

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}


2011 2月 18日 2011年

IE瀏覽器的JavaScript錯誤:對象不支持此屬性或方法

這個奇怪的問題,其中一塊Javascript的工作像往常一樣欄的IE瀏覽器在所有ANS罰款 :) 它是簡單的,但因為不是我寫的腳本,過了一段時間來調試這個“對象不支持此屬性或方法”的錯誤,只有IE瀏覽器被扔了 可能! 如果我是寫劇本,我不會有這個錯誤,不要混淆我的變量名,字段ID :)。

問題:對象不支持此屬性或方法(第3行)

 function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } 

解決方案:
在上面的例子(3號線......的“shortdesc = document.getE ......”)thirdrow產生錯誤。 我想所有的那種愚蠢的事情,甚至我不值得在這裡提到,終於猜到什麼! 只是改變shortdesc VAR別的擺脫了錯誤。 基本上! 變量的名稱有不同從fieldID的


2010 2010年 12月 28日

顯示在Android的靜態HTML頁面(ECLIPSE)模擬器

現在幾個小時,我也一直在尋找解決方案,運行/測試在我的Eclipse / Android模擬器的靜態HTMLs。 沒有完全成功...... 我的意思是“完全”是被加載的HTML確定,但所有的CSS和JS,即沒有見過的視覺表達。 在開發的話,CSS不會應用到頁面...

想到這幾個傢伙新手的Andr​​oid UI開發,如果我注意到了下來,我用顯示的HTML片段。

和Android大師,請添加您的寶貴意見,幫助我們進一步在移動應用程序的UI開發新手!

對不起! 但是我假設你知道如何在Eclipse中創建一個Android移動應用。

創建您的活動,這將讀取該文件從您的項目資產/文件夾的index.html'。

 public class Test extends Activity {  /** Called when the activity is first created. */  @Override  public void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    WebView webview = new WebView(this);    setContentView(webview);    try {      InputStream fin = getAssets().open("index.html");        byte[] buffer = new byte[fin.available()];        fin.read(buffer);        fin.close();        webview.loadData(new String(buffer), "text/html", "UTF-8");    } catch (IOException e) {      e.printStackTrace();    }  } } 

2010 2010年 5月 20

循環再用CSS:在看CSS框架

再騎自行車是Buzzword的,並在web開發中,這意味著沒有什麼不同。 它節省能源,努力!

編寫CSS和從設計創建HTML多年,我都遵循一些最佳實踐,在節省時間和精力,我們俗稱為“重新發明輪子”的長期追求。 一次又一次,我告訴自己,我必須創建一些模板,一些標準的可重複使用的CSS,我會用我今後的工作中的開箱。 雖然不是完全,但我還是設法實現一些目標。

在推進,再利用CSS的,我看比我自己,在為數不多的CSS框架,通常是提供給我們,並決定把他們使用,因為這些嘗試和測試,並創建由許多經驗豐富的開發。 更重要的是“避免重新發明”。

雖然退伍軍人的常識,我已經嘗試鋼筆的一些關鍵概念/最佳做法/已進入了這些框架的建立,使盡可能循環再用CSS的想法。 希望這將有助於一些CSS開發只是最近登上了CSS的行列!

鍵重新CSS的循環:

使用命名約定

這是最重要的因素,在可重複使用的CSS / HTML。 給予一致的名稱,頁面元素,使很少或修改頁面組件和他們的風格與再利用。 按照這種說法,即使HTML5的,比其前任的重大變化而變化,是引進一些結構性的標籤,即。 <article>,的<section>,的<Header>,<aside>,<nav> 的HTML5將帶來什麼? ]。 甚至與HTML 4(或更低),它是最好的,就像在下面簡單的例子consistanly命名您的網頁的標準部分...

請記住,你的項目大多數網頁,最終具有相同的核心結構元素。 確定這些共同的核心頁面元素....

  <div id="container">
    <div id="header"> ... </ DIV>
    <div id="nav"> ... </ DIV>
    <div id="sidebar"> ... </ DIV>
    <div id="footer"> ... </ DIV>
   </ DIV> 

重置默認樣式(CSS的重置):無論您使用的框架或自己寫的,你必須提供的CSS重置[ 什麼是CSS重置? ],因為它們減少或有時消除各種瀏覽器之間發生的視覺不一致。 在簡單的話,CSS復位機制設置為零或空值的HTML元素的樣式,因此重寫他們可能帶來的任何瀏覽器的默認值。 這提供了一個乾淨的石板,設置這些元素的任何默認的User-Agent無效[ CSS2.1的用戶代理樣式表默認的屬性]。 所有的CSS框架的復位機制。 如果你正在寫你自己的CSS重置的忠告是,如果你碰巧忘記重置鍵屬性,它可能會導致跨瀏覽器問題,是非常難以調試。 記住,保持復位樣式的副本,他們拖放到你創建的每一個新項目。

 身體,DIV,DL,DT,DD,UL,OL,李,
  H1,H2,H3,H4,H5,H6,
 前,表格,字段集,輸入,選擇,textarea的,
  P,BLOCKQUOTE,表,TH,TD
  {
   邊框:0px;
   保證金:0;
   填充:0;
  } 

設置默認值(基準樣式)元素:

當您設置(零或空)某些HTML元素的某些屬性的默認值,它是要運用這些元素在每一個實例的一些風格。 這些默認設置可能會有所不同,按設計或根據你遵循的最佳做法。

最CSS框架,介紹了一些新的默認設置,除了重置瀏覽器默認風格。
這些默認值是無效的默認用戶代理(離剝離的CSS復位),這些都將是跨瀏覽器保持一致。

記住,基準樣式用於設置將會被用來設計樣式。 例如。

  HTML字體大小:77%;字體家庭:宋體,無襯線;}
強,H1,H2,H3,H4,H5,H6 {字體重量:大膽;} 

常見的HTML組件和公共類的抽象風格:

幾頁組成的大多數項目將整個網站使用常見的HTML元素,例如一些排序形式,警報和錯誤,自定義彈出窗口,燈箱等,由於這些組件再次使用,整個項目,這將是有益的提供設置預定義的樣式與這些組件相關的類,你可以自己節省了很多時間。

除了常見的HTML組件的定義可重複使用的樣式定義,我們可以排版,顏色,甚至佈局類的抽象風格有關。 我傾向於使用...像Clearfix,Font08,FontGrey,AlignL,DisplayB等常見的類

 表單輸入{邊框:0px;背景:#FFFFFF;填充:0px 10px; _padding:0px 0px;高度:26px;顏色:#000000;線高度:30像素字體大小:1.1em;}
表單的TEXTAREA {邊框:0px;背景:#FFFFFF顏色:#000000;字體大小:.9 EM;線高度:1.5em;溢出:可見;}
 ,fbold {字體重量:大膽;顏色:#CCCCCC;}
 fgrey {顏色:#666666;}
 flightgrey {顏色:#BBBBBB;}
 clearfix {明確:既;}
分頻器{邊界:1px固體#647B06;邊境底:1px固體#9CC00A;高度:0px;}
 。displayb。displayn {顯示:塊;} {顯示:無;}
 alignr {文本對齊:右}。alignc {文本對齊:中心}
 {浮動:權利;}。floatr。floatl {浮動:左;} 

修復常見的瀏覽器怪癖

各種瀏覽器實現的CSS代碼和CSS規範的支持,提供不同的級別。 這樣做的結果.... “瀏覽器怪癖”,我們開發人員留下來處理。 尤其是,IE6的困擾的最後期限,以滿足大多數CSS編碼。 好消息是經驗已經聚集了可能出現的可重複使用的修復這些問題(通常被稱為CSS的黑客 )。

請記住,保持這些黑客/修復方便

  / *以下變焦:1規則是專門為IE6 + IE7的。  * /
    * HTML。clearfix
    *:第一胎+ HTML clearfix {
          變焦:1;
      } 

不斷完善你的CSS

  • 循環再用的習慣,不會來找你的一天。 它有發達。 因此,打算再騎自行車。 牢記這一點,你可以抽象的默認樣式,排版的定義,佈局,HTML元素的樣式等嘗試超前思考。
  • 還看你過去的項目,這將有助於確定風格,你傾向於經常使用跨項目對接洽談。 它抽象。
  • 刪除任何未使用的樣式。 這種做法將繼續從你的CSS框架,一種常見的症狀稱為“腹脹” -
  • 刪除重複性風格。
  • 建立了一套有足夠的靈活性,移植整個項目的樣式。

在看看CSS框架

最後。 如果你有啟發,並打算使用一個或多個CSS框架,繼承人是幾個流行的快速列表....

  • 960網格系統 :960網格系統是通過提供常用的尺寸,寬度960像素的基礎上,為了簡化Web開發工作流程。 有三種型號:12,16和24列,它可以單獨或串聯使用。 思想無關,你不能為自己創造一個輕鬆足夠,該框架提供了在打印PDF格式,可以使用,勾畫頁designs.Bet網格模板,它將使一個專業的印象,如果你攜帶時幾張你去到一個客戶端的UI需求收集。 它也像煙花,閃光時,InDesign,Illustrator中時,Photoshop,Visio中,提供了一個“十起動器”,開始您的設計工作等提供了基本的網格模板,流行的設計軟件。
  • 藍圖 :藍圖提供了明顯分類的CSS文件重置,網格,表格,打印,排版,插件按鈕,標籤和精靈等,它還提供了一個單獨的包括對IE的支持。
  • SenCSs :不同於上述兩種,SenCSs(讀感),不會有佈局的CSS定義。 它包括字體,填充,邊距,表格,列表,標題,引用文字,表格和更多。
  • 的BlueTrip :它原來的聲名鵲起,它是其他人的框架,從那裡得到它的名字......像藍印花布旅遊 OLI提供最好的功能組合。 其功能集,包括24列格,排版樣式,ORM樣式,打印,按鈕等。
  • YUI的網格 :給您帶來的Yahooo開發網絡,支持流體寬度750px,950px,974px(100%)的佈局以及預設固定寬度的佈局,並能夠輕鬆地自定義任意數量。 正如你可以看到,它在技術上只是佈局組件。 銳還提供了其他網頁元素的HTML / CSS套
  • YAML的(另一個多列佈局)
  • emastic

請記住,使用CSS框架並不意味著你是懶惰的創建自己的......這意味著,你很聰明,學習別人的經驗和失誤,節省時間和提高生產率!!


2010 2010年 03月 13日

@ fontface:表示它與您選擇的字體,使用WebFonts

今年的CSS完成10年內存在! 那些已經出現了一段時間,贏得他們的麵包(或不)使用CSS,那麼您可能已經知道我們如何挨餓的字體很好的選擇。 即使像那些缺少的字體設計師CSS禪意花園已使用CSS背景圖片,字體,以取代他們的設計做一些正義的追求。 我們也嘗試過的閃存/ JavaScript®黑客來實現我們的設計目標。 這絕不是一種錯誤的方式來獲得,我們希望把我們的網頁設計的字體,但肯定的是,它是不是最可取的辦法。 多年來網頁設計師,像我一樣,已經完全依賴於十年或為他們設計的字體。

Web標準和字體格式最近的事態發展使人們有可能比其他同舊的默認字體在字體渲染HTML文本。 進來“fontface”的CSS decleration。

@ fontface provids鏈接到實際的字體文件,並從網上檢索的解決方案。 使用@ fontface,設計者可以使用,無需凍結作為背景圖片的文字字體。 實施是非常簡單,如下所示,但一切美好的事物有一個反面的一部分,不是所有的瀏覽器支持一個單一的“ 字體類型 ”。 如果您正計劃在網站中使用@ fontface需要跨瀏覽器支持,那麼你將有來源提供各種相同的字體類型。

  1. TrueType字體 -設計很好看屏幕上的一個格式。 推薦,特別是對Windows瀏覽器(瀏覽器)。
  2. 的OpenType(CFF) -此格式是更好的打印工作,並且不總是看Windows上良好。
  3. 橋式 -你需要這種格式,如果你想針對Internet Explorer的。 IE瀏覽器將不使用任何其他格式。 我們的EOT將被視為“精簡版”,因為它們既不是壓縮,也不域限制。
  4. SVG的 -這是一個XML格式的一些瀏覽器支持包括iPhone。
  5. WOFF -跨瀏覽器,僅在網站上的字體格式是輕量級(字體數據是zip壓縮),可以使用TrueType或PostScript的(CFF)概述編譯。 它是目前支持由Firefox 3.6 +。

使用@ fontface

  @字體面{
字體家庭:'CalligraphyFLFRegular“;
 SRC:URL(CalligraphyFLF.eot“);
 SRC:當地(“CalligraphyFLF),當地的(”CalligraphyFLF),URL(CalligraphyFLF.woff“)(WOFF')的格式,URL(”CalligraphyFLF.ttf)格式(TrueType字體“),網址(”CalligraphyFLF SVG#CalligraphyFLF)格式(SVG);
 }
 @字體面{
  字體家庭:“你的字體”;
   SRC:URL(“字體/ font_filename.eot”);
   SRC:本地(“備用名稱”),當地(“Alternatename”),
     URL(“字體/ font_filename.woff”)格式(WOFF)
     URL(“字體/ font_filename.otf”)的格式(“的OpenType”),
     URL(“字體/ font_filename.svg的#font_filename”)的格式(“SVG”);
   }
 H2 {字體家庭:“你的字體”,格魯吉亞,襯線;} 

正如你可以看到從上面的例子,包括選擇字體的字樣,具有相同的字體,一組fonttypes鏈接。 因此人們稱其為“字體工具包”。
有字體套件,明確允許使用CSS @ font-face的財產,根據最終用戶許可協議(EULA)連接。

有用WebFont資源:


2010 2010年 3月 9日

其關於“網頁設計師誰可以沒有代碼”

用我有限的技能與工具,如Photoshop和Illustrator集,我可以坦率地承認,我是個更好的開發人員比我一個設計師。 但我的背景與核心(服務器端)的Java / PHP / COBOL的發展,一直是我的UI開發能力非常積極的影響。 我的意思是,同時創造了我的設計,即每當我做設計,我認為設計如何可以最好轉換成HTML的CSS,而這樣做的HTML CSS,我給後端技術有關的思想和合理確定可以輕鬆實現的HTML成XSL循環或PHP的片段等。

多年來,我一直扔在設計UI設計師,誰可能不有一個線索,HTML或CSS是什麼頭。 這些年來我一直在想,我會要求太多,如果我只是希望設計師,誰是試圖shov他的“不可能的代碼”設計我的喉嚨,只是一點點理解他的設計將被轉換成。 這將有助於對不對?

然後,我遇到了這個職位今天的網頁設計師不能代碼 ...感謝主! 我只是許多有同樣的感覺的人之一......上述artitle是位長篇大論...... 但值得一讀,它的每一句話。

感謝埃利奧特傑伊股票......我就放心了!

下面是一些摘錄從Elliots文章

哇,這一天! 它始於一個小鳴叫,似乎席捲了整個網頁設計社區討論結束。 它似乎有一些非常強大的網頁設計師是否應該能夠代碼的問題上所持的觀點。
...
所以,在我們得到這個,讓我快速回顧一下,我今天上午在Twitter說:

老實說,我感到震驚,在2010年,我還是跨越未來“網頁設計師”,誰也不能編寫自己的設計。 沒有任何藉口。

...我應該已經多了幾分具體在我的鳴叫。 我談論沒有連最基本的HTML和CSS技巧實際現場變成一個平面設計的設計師。 沒有的人不是故意選擇的代碼,那些不能。 和我也談到這裡只有前端代碼,當然這很荒謬,認為設計師也應該是驚人的後端程序員...

我們得到的“網頁設計”在Illustrator中,300dpi的發送,不可能代碼,沒有一致性/可用性。
~~艾米馬洪

它已經晚了,我有這某種程度上包裝。 我知道會有許多人同意我的看法,我的意思是不是得罪或擾亂任何人不能代碼,但我希望,我所說的一些反映一些點,總是拿出鑽研時本次辯論。

在一天結束時,我沒有失去過誰可以編寫,誰不能睡覺。 我只是真正驚訝地發現,這麼多的設計師缺乏前端的技能,因為我認為這是過去的事情了。

也可以參考的意見,有大約320評論,我寫了......他們都是值得一讀。
請在這裡讀Elliots滿後.. 人可以沒有代碼的網頁設計師


2010 2010年 3月 4日

與文字的對齊單選按鈕

由於單選按鈕和文本是內聯的,因此文本將對齊單選按鈕的底部,文本會顯得稍下的單選按鈕。
如果你想這些頂端對齊,你必須放置到單獨的容器一樣的div或跨度(如適用)的電台和文字,他們將採取照顧對齊。 使用表格單元格太多,外觀設計的簡要允許的話,它會更容易。

這不會看在每一個瀏覽器一樣,每一個瀏覽器顯示收音機略有不同,所以總是大小問題,無論你做什麼。


2010 2010年 1月 8日

的HTML5將帶來什麼?

HTML5仍然是一個草案。 正如我寫的,HTML 5,在2004年展開的工作,仍在之間的共同努力形狀的W3C HTML WGWHATWG的 字是下一代的HTML將增強功能和特性,將新的結構和語義,表單控制,原料藥等多媒體標籤。

簡單的英語......這一切意味著什麼,我們的UI開發...

  • 有一些結構性的標籤,即除。 <article>,的<section>的<Header>,<aside>,<nav>,這將取代大部分<div>標籤在網頁上使用,使您的網頁更多的語義,但更重要的,更容易閱讀
    嘿! 試想一下,在尋找一失踪密切的DIV標記保存的努力。
    例如:
  <BODY>
  的<Header> ... </頭>
   <nav> ... </資產淨值>
   <article>
    的<section>
       ...
     </節>
   </文章>
   <aside> ... </擱置>
   <footer> ... </頁腳>
 </ BODY> 

而不是

  <BODY>
   <div id="header"> ... </ DIV>
   <div id="nav"> ... </ DIV>
   <div class="article">
     <div class="section">
       ...
     </ DIV>
   </ DIV>
   <div id="aside"> ... </ DIV>
   <div id="footer"> ... </ DIV>
 </ BODY> 
  • 與音頻和視頻內容,如YouTube,使用網頁上的嵌入式多媒體的到來increaded倍。 考慮到這一點,現在的計劃是增加對視頻和音頻嵌入到瀏覽器本身的原生支持,因此允許用戶播放,暫停,停止,尋求,腳本使用內置的DOM API來控制播放和音量調節。

例如:

  <video poster="poster.jpg">
     <來源SRC =“video.3gp”類型=的“video/3gpp”
    媒體=“掌上電腦”>
         <source src="video.mp4" type="video/mp4">
 </視頻>
的<audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </音頻> 
  • 更好地定義為如現有元素的語義角色。 的<strong>和<em>實際上現在可能有不同的含義,即它們將不同的表現。

有更多的變化/升級到新版本...會不斷更新這個職位,因為我來accross的任何有趣有用的.... 觀看此空間

本文檔可能無法提供準確的信息,如HTML 5規範仍然是積極發展。 如有疑問,可隨時檢查HTML 5規範


2009 2009年 11月 7日

CSS縮放-又一IE瀏覽器的怪癖; 3像素移位

時間和一次又一次,當所有其他瀏覽器看到的行為告訴由W3C規則,IE瀏覽器的螺旋發展的精神,你發脾氣,但這似乎並沒有修復。 只是這樣的一個人,這是IE7中的問題。

問題陳述:
我等其他嚴重的web開發中的許多人已經注意到很多時候,當有嵌套佈局中的彩車上懸停,對一些鏈接(錨標記),含集裝箱似乎移動幾個像素的權利。 我曾嘗試谷歌對於這個問題的解決方案,但幾乎沒有發現任何合理的答案,為什麼發生時(可能有助於防止發生這個問題),所以我從來沒有找到一個明確的解決問題的...

可能的解決方案:
出來的經驗,我有通知倍,即90%,這個問題是由固定的不當行為容器中加入CSS定義縮放屬性...

 #somediv {
      變焦:1;
 }

再次理由是含糊不清的...試試這個...
在IE中的一些元素,有一個“hasLayout的”屬性,這是“真正的”默認。 許多視覺CSS行為,例如,一個alpha過濾器只適用於hasLayout的元素。 {變焦:1},似乎給目標元素的hasLayout屬性 .... 有用嗎? 我不這麼認為...

變焦屬性似乎也支持由鉻,但其使用力似乎使許多不利影響,我的佈局......試試吧,如果你的作品......如果沒有,書籤在“CSS胡扯”此頁


2009 2009年 10月 18日

HTML和XHTML

  • 文檔類型聲明需要目前是在一個文件,使用HTML語法開始。 它可以選擇性地使用在XHTML語法,但它不是必需的。 XHTML文檔並不需要包括DOCTYPE因為XHTML文檔交付正確使用XML MIME類型的瀏覽器,並為XML處理,始終沒有怪癖模式中呈現。
  • 在XHTML中,標籤名稱是大小寫敏感的,通常被定義寫在小寫。 然而,在HTML中,標記名是大小寫敏感的,可寫在全部大寫或大小寫混合,雖然最常見的慣例,是要堅持用小寫。 開始和結束標記的情況不相同,但一致不使代碼看起來更整潔。

使用HTML的優點

  • 向後兼容現有的瀏覽器
  • 著者已經熟悉的語法
  • 寬鬆和寬容的語法意味著將不會有用戶敵對黃屏死亡 “,如果一個錯誤不慎滑倒通過
  • 方便的速記語法,例如,作者可以省略一些標籤和屬性值

使用XHTML的好處

  • 嚴格的XML語法鼓勵作者寫形成的標記,可能會發現一些易於維護
  • 直接集成與其他XML詞彙,如SVG和MathML
  • 允許使用的XML處理,其中一些作者,編輯和/或出版過程的一部分使用

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