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;}
讀了一些博客認為這是很好的未來文獻目錄...... 也可能是一個重要的面試問題,你會問有一天......
寫一個CSS的片段將顯示在新的瀏覽器,在舊的瀏覽器款有藍色,紅色,在IE6和黑色的綠色IE7中
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
這個奇怪的問題,其中一塊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的
現在幾個小時,我也一直在尋找解決方案,運行/測試在我的Eclipse / Android模擬器的靜態HTMLs。 沒有完全成功...... 我的意思是“完全”是被加載的HTML確定,但所有的CSS和JS,即沒有見過的視覺表達。 在開發的話,CSS不會應用到頁面...
想到這幾個傢伙新手的Android 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(); } } } 再騎自行車是Buzzword的,並在web開發中,這意味著沒有什麼不同。 它節省能源,努力!
編寫CSS和從設計創建HTML多年,我都遵循一些最佳實踐,在節省時間和精力,我們俗稱為“重新發明輪子”的長期追求。 一次又一次,我告訴自己,我必須創建一些模板,一些標準的可重複使用的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
最後。 如果你有啟發,並打算使用一個或多個CSS框架,繼承人是幾個流行的快速列表....
請記住,使用CSS框架並不意味著你是懶惰的創建自己的......這意味著,你很聰明,學習別人的經驗和失誤,節省時間和提高生產率!!
今年的CSS完成10年內存在! 那些已經出現了一段時間,贏得他們的麵包(或不)使用CSS,那麼您可能已經知道我們如何挨餓的字體很好的選擇。 即使像那些缺少的字體設計師CSS禪意花園已使用CSS背景圖片,字體,以取代他們的設計做一些正義的追求。 我們也嘗試過的閃存/ JavaScript®黑客來實現我們的設計目標。 這絕不是一種錯誤的方式來獲得,我們希望把我們的網頁設計的字體,但肯定的是,它是不是最可取的辦法。 多年來網頁設計師,像我一樣,已經完全依賴於十年或為他們設計的字體。
Web標準和字體格式最近的事態發展使人們有可能比其他同舊的默認字體在字體渲染HTML文本。 進來“fontface”的CSS decleration。
@ fontface provids鏈接到實際的字體文件,並從網上檢索的解決方案。 使用@ fontface,設計者可以使用,無需凍結作為背景圖片的文字字體。 實施是非常簡單,如下所示,但一切美好的事物有一個反面的一部分,不是所有的瀏覽器支持一個單一的“ 字體類型 ”。 如果您正計劃在網站中使用@ fontface需要跨瀏覽器支持,那麼你將有來源提供各種相同的字體類型。
使用@ 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資源:
用我有限的技能與工具,如Photoshop和Illustrator集,我可以坦率地承認,我是個更好的開發人員比我一個設計師。 但我的背景與核心(服務器端)的Java / PHP / COBOL的發展,一直是我的UI開發能力非常積極的影響。 我的意思是,同時創造了我的設計,即每當我做設計,我認為設計如何可以最好轉換成HTML的CSS,而這樣做的HTML CSS,我給後端技術有關的思想和合理確定可以輕鬆實現的HTML成XSL循環或PHP的片段等。
多年來,我一直扔在設計UI設計師,誰可能不有一個線索,HTML或CSS是什麼頭。 這些年來我一直在想,我會要求太多,如果我只是希望設計師,誰是試圖shov他的“不可能的代碼”設計我的喉嚨,只是一點點理解他的設計將被轉換成。 這將有助於對不對?
然後,我遇到了這個職位今天的網頁設計師不能代碼 ...感謝主! 我只是許多有同樣的感覺的人之一......上述artitle是位長篇大論...... 但值得一讀,它的每一句話。
感謝埃利奧特傑伊股票......我就放心了!
下面是一些摘錄從Elliots文章 。
老實說,我感到震驚,在2010年,我還是跨越未來“網頁設計師”,誰也不能編寫自己的設計。 沒有任何藉口。
...我應該已經多了幾分具體在我的鳴叫。 我談論沒有連最基本的HTML和CSS技巧實際現場變成一個平面設計的設計師。 沒有的人不是故意選擇的代碼,那些不能。 和我也談到這裡只有前端代碼,當然這很荒謬,認為設計師也應該是驚人的後端程序員...
我們得到的“網頁設計”在Illustrator中,300dpi的發送,不可能代碼,沒有一致性/可用性。
~~艾米馬洪
它已經晚了,我有這某種程度上包裝。 我知道會有許多人同意我的看法,我的意思是不是得罪或擾亂任何人不能代碼,但我希望,我所說的一些反映一些點,總是拿出鑽研時本次辯論。
在一天結束時,我沒有失去過誰可以編寫,誰不能睡覺。 我只是真正驚訝地發現,這麼多的設計師缺乏前端的技能,因為我認為這是過去的事情了。
也可以參考的意見,有大約320評論,我寫了......他們都是值得一讀。
請在這裡讀Elliots滿後.. 人可以沒有代碼的網頁設計師
由於單選按鈕和文本是內聯的,因此文本將對齊單選按鈕的底部,文本會顯得稍下的單選按鈕。
如果你想這些頂端對齊,你必須放置到單獨的容器一樣的div或跨度(如適用)的電台和文字,他們將採取照顧對齊。 使用表格單元格太多,外觀設計的簡要允許的話,它會更容易。
這不會看在每一個瀏覽器一樣,每一個瀏覽器顯示收音機略有不同,所以總是大小問題,無論你做什麼。
HTML5仍然是一個草案。 正如我寫的,HTML 5,在2004年展開的工作,仍在之間的共同努力形狀的W3C HTML WG和WHATWG的 。 字是下一代的HTML將增強功能和特性,將新的結構和語義,表單控制,原料藥等多媒體標籤。
簡單的英語......這一切意味著什麼,我們的UI開發...
<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>
例如:
<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"> </音頻>
有更多的變化/升級到新版本...會不斷更新這個職位,因為我來accross的任何有趣有用的.... 觀看此空間
本文檔可能無法提供準確的信息,如HTML 5規範仍然是積極發展。 如有疑問,可隨時檢查HTML 5規範 。
時間和一次又一次,當所有其他瀏覽器看到的行為告訴由W3C規則,IE瀏覽器的螺旋發展的精神,你發脾氣,但這似乎並沒有修復。 只是這樣的一個人,這是IE7中的問題。
問題陳述:
我等其他嚴重的web開發中的許多人已經注意到很多時候,當有嵌套佈局中的彩車上懸停,對一些鏈接(錨標記),含集裝箱似乎移動幾個像素的權利。 我曾嘗試谷歌對於這個問題的解決方案,但幾乎沒有發現任何合理的答案,為什麼發生時(可能有助於防止發生這個問題),所以我從來沒有找到一個明確的解決問題的...
可能的解決方案:
出來的經驗,我有通知倍,即90%,這個問題是由固定的不當行為容器中加入CSS定義縮放屬性...
#somediv { 變焦:1; }
再次理由是含糊不清的...試試這個...
在IE中的一些元素,有一個“hasLayout的”屬性,這是“真正的”默認。 許多視覺CSS行為,例如,一個alpha過濾器只適用於hasLayout的元素。 {變焦:1},似乎給目標元素的hasLayout屬性 .... 有用嗎? 我不這麼認為...
變焦屬性似乎也支持由鉻,但其使用力似乎使許多不利影響,我的佈局......試試吧,如果你的作品......如果沒有,書籤在“CSS胡扯”此頁