Bazı blog bu okumuştum ... gelecekte ref için bu katalog için güzel olduğunu düşündüm .... Ayrıca bir gün sordu edeceğini önemli bir mülakatta olabilir ....
IE7 IE6 ve siyah yeşil, yeni tarayıcılarda kırmızı eski tarayıcılarda da mavi bir paragraf, görüntüler CSS bir pasajı yaz
#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}
Javascript bir parça her zamanki çubuğu IE gibi tüm tarayıcı ans ince çalıştı bu garip sorunu vardı 
Basit ... öyleydi, ama senaryo bana göre yazılı değil bu yana, sadece IE kadar atan bu "Nesne bu özelliği veya yöntemi desteklemiyor" hata ayıklamak için zaman aldı. Muhtemelen! Senaryoyu yazmak için olsaydı alanı Kimlikleri :) benim değişken adları karışmaz gibi, ben, hiç bu hata var olmazdı.
Sorun: Nesne (on line 3) bu özelliği veya yöntemi desteklemiyor
function funzoneSP(){ document.getElementById('video_id').style.visibility="hidden"; shortdesc = document.getElementById('shortdesc').value; .... } Çözüm:
Hata Yukarıdaki örnekte (3 Hat ... "shortdesc = document.getE ....") olarak thirdrow oluşturulur. Ben burada bile söz değerlidir benim değilsin aptalca şeyler her tür, denedim ve sonunda ne oldu! Sadece başka bir şey için shortdesc var değişen hata kurtuldum. Temelde! Değişken adı fieldID farklı zorunda
Birkaç saat için şimdi Eclipse / Android emülatörü benim statik htmls çalıştırmak / sınamak için çözüm arayan edilmiştir. Henüz tam anlamıyla başarılı olamamıştır .... Ben ne kastettiğimi "Totally" HTML Tamam yüklenen ancak tüm CSS ve JS, yani görsel anlatım görmedim. Geliştirici bir deyişle, CSS sayfasına uygulanmaz ...
Ben HTML görüntülemek için kullanılan bu aşağı pasajı not ise, bir kaç adam acemi Android UI geliştiriciler yapmayı düşünmüştüm.
VE Android uzmanları, bize daha fazla mobil uygulama UI geliştiriciler yeni başlayanlara yardımcı olmak için yorum eklemek LÜTFEN!
Üzgünüm! ama sana Eclipse Android Mobil Uygulama oluşturmak için nasıl olduğunu varsayarak.
Etkinlik olarak oluşturun; Bu proje varlıklar / klasörden dosya 'index.html' okuyacaktır.
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(); } } } Re-Bisiklet Buzzword ve Web Geliştirme hiçbir farklı anlamına gelir. Bu çaba açısından, enerji tasarrufu!
CSS yazma ve tasarımlar HTML yaratma yıl içinde, ben "Yeniden icat Wheel" olarak biz bunlara vadede ne zaman ve enerji tasarrufu peşinde, birkaç iyi uygulamaları takip etmiştir. Zaman ve tekrar tekrar, benim gelecekteki çalışmalarında KUTUSU DIŞI kullanacağı bazı standart yeniden kullanılabilir CSS, birkaç şablon oluşturmak gerektiğini, kendimi anlattım. Tamamen değil de ama bazı hedeflerine ulaşmak için başarmıştı.
Ileriye yılında, CSS Yeniden Kullanım, kendimi daha bizim için yaygın olarak mevcuttur ve bu denenmiş ve test edilmiş ve çok deneyimli geliştiriciler tarafından oluşturulan olarak bunları kullanmak için koymaya karar verdim birkaç CSS çerçeveler bir göz vardı. Daha da önemlisi "yeniden icat KAÇININ".
Gazilere ortak bilgi, ben kalem çalıştık rağmen bazı temel kavramları / en iyi uygulamalar / CSS RE-BİSİKLET mümkün kılmak için, bu çerçeveler oluştururken gitti düşünceleri. Bu sadece yaklaşık ve son zamanlarda CSS çoğunluğa bindik bazı CSS geliştiriciler yardımcı olacağını umuyoruz!
İsimlendirme kullanın
Bu CSS / HTML yeniden kullanılabilir yapımında en önemli faktör olmalıdır. Sayfa öğeleri tutarlı isimleri verilmesi veya çok az değişikliklerle sayfası bileşenlerine ve bunların stilleri yeniden kullanımını sağlar. Bu argüman doğrultusunda, bile HTML5, selefine göre önemli bir değişiklik değişikliği, bazı yapısal etiketler yani tanıtmaktır. <article>, <section>, <header>, <aside> ve <nav> [ HTML5 neler getirecek? ]. Hatta HTML 4 (veya daha düşük) ile, o consistanly Aşağıdaki basit örnekte olduğu gibi sayfanızın standart bölümleri adlandırmak için en iyisi ...
Unutmayın, proje üzerinde çoğu sayfaları, aynı çekirdek yapı elemanları sahip bitirmek. Bu ortak temel sayfa öğeleri tanımlamak ....
<div id="container"> <div id="header"> ... </ div> <div id="nav"> ... </ div> <div id="sidebar"> ... </ div> <div id="footer"> ... </ div> </ Div>
Standart Stiller (CSS sıfırlar) Reset: Bir çerçeve kullanmak veya kendi yazmak ister CSS sıfırlar sağlamalıdır [ CSS sıfırlar nelerdir? ], onlar azaltmak veya bazen çeşitli tarayıcılar arasında meydana görsel tutarsızlıkları ortadan kaldırmak gibi. Basit bir deyişle CSS Sıfırlama Mekanizması böylece bu pozlar herhangi bir tarayıcı varsayılan değerleri geçersiz kılma, sıfır veya boş değerler HTML Element stilleri ayarlar. Bu herhangi bir User-Agent Varsayılanları bu unsurları void [özelliklerini ayarlamak için bir mazisi temiz sağlar CSS2.1 User Agent Style Sheet Varsayılanları ]. Tüm CSS çerçeveler sıfırlama mekanizması var. Eğer kendi CSS sıfırlar yazıyorsanız, dikkatli bir kelime bir anahtar özelliği sıfırlamak için unutmak için ne ise, bu hata ayıklamak çok zor olan çapraz tarayıcı sorunları, neden olabilir olmasıdır. Unutmayın, sıfırlama stilleri bir kopyasını saklayın ve oluşturduğunuz her yeni projenin içine bırakın.
gövde, div, dl, ol dt, dd, ul, li, h1, h2, h3, h4, h5, h6, öncesi, form, fieldset, input, select, textarea, p, blockquote, masa, th, td { border: 0px; margin: 0; padding: 0; }
Set Defaults (Baseline Stiller) Elements:
Eğer (sıfır veya null) bazı HTML Elements belirli niteliklerin varsayılan değerleri ayarladıktan sonra, Bu unsurların her örneği üzerinde bazı stilleri uygulamak için gereklidir. Bu varsayılan ayar tasarım göre değişebilir veya sizi takip en iyi uygulamalar doğrultusunda olabilir.
En CSS çerçeveler, her zaman varsayılan tarayıcı stillerini sıfırlama ek olarak, bazı yeni varsayılan tanıttı.
Bu varsayılan User-Agent Defaults (CSS Sıfırlama tarafından götürülen) yoksun olmak, bu tarayıcılar arasında tutarlı olacaktır.
Unutmayın, Temel stilleri gidiyoruz tasarım çapında kullanılacak stillerini ayarlamak için kullanılır. ör.
html {font-size: 77%; font-family: Arial, sans-serif;} güçlü, h1, h2, h3, h4, h5, h6 {font-weight: bold;}
Ortak HTML Bileşenleri ve Ortak Sınıflar için Özet Stilleri:
Gibi bileşenler projeler arasında tekrar tekrar kullanıldığı için birçok sayfadan oluşan, çoğu projesi formlar, uyarıları ve hataları, Özel up'ları, lightbox'lar vb gibi bazı sıralama için site içerisinde kullanılan yaygın HTML öğeleri olacak, bir sağlamak için faydalı olacaktır bu bileşenler için önceden tanımlanmış stillerle ilişkili sınıflar seti ve kendinizi çok zaman kaydedebilirsiniz.
Dışında yaygın HTML bileşenleri için yeniden kullanılabilir stilleri tanımları tanımlayarak, biz soyut tarzlarda sınıflar tipografi, renk, hatta düzeni ile ilgili olabilir. Kendimi kullanmak eğilimindedir ... Clearfix, Font08, FontGrey, AlignL, DisplayB vb gibi ortak dersleri
form girdi {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; height: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;} şeklinde textarea {border: 0px; background: # ffffff; color: # 000000; font-size: .9 em; line-height: 1,5 em; taşması: görünür;} . Fbold {font-weight: bold; color: # cccccc;} . Fgrey {color: # 666666;} . Flightgrey {color: # bbbbbb;} . {Clear: both;} clearfix . Bölücü {border-top: 1px solid # 647B06; border-bottom: # 9CC00A 1px solid; height: 0px;} . Displayb {display: block;}. Displayn {display: none;} . Alignr {text-align: sağ}. Alignc {text-align: center} . Floatr {float: right;}. Floatl {float: left;}
Ortak tarayıcı tuhaflıklar için Düzeltmeler
Çeşitli tarayıcılar CSS kodunu uygulamak ve CSS özellikleri için destek değişen düzeyde sağlamak. Bunun sonucu .... Biz geliştiriciler mücadele bırakılması gerektiğini "Tarayıcı olağandışı". Özellikle, IE6 karşılamak için bir son tarih ile en CSS kodlayıcıları ziyaret ediyor. İyi haber deneyimi bu konuları (Sıklıkla olarak adlandırılan birlikte mümkün REUSABLE düzeltmeleri getirdi olan CSS Hacks ).
Unutmayın, bu Hacks / düzeltmeleri el altında tutun
/ * Aşağıdaki zoom: 1 kuralı IE6 + IE7 içindir. * / * Html. Clearfix, *:. First-child + html clearfix { zoom: 1; }
Sizin CSS Rafineri tutun
Nihayet. Size ilham ve CSS çerçeveler bir veya daha fazla kullanmak niyetinde iseniz, Heres birkaç popüler olanları hızlı listesi ....
CSS çerçeveler kullanarak kendinize ait bir tane oluşturmak için tembel olduğu anlamına gelmez ... Bu size, başkalarının tecrübe ve hatalardan ders TIME ve VERİMLİLİK ARTIŞI SAVE akıllı olduğunu ima ediyor, unutmayın!
CSS bu yıl 10 yıl varlığını tamamlandı! CSS kullanarak kendi ekmek (veya değil) kazanç, bir süredir edenler, o zaman biz yazı iyi bir seçim için açlıktan edilmiştir nasıl farkında olabilir. Hatta yazı eksikliği ile de bu gibi tasarımcıların CSS Zen Garden kendi tasarımları bazı adalet yapmanın peşinde fontları değiştirmek için CSS arka plan görüntülerinin kullanımı yaptık. Ayrıca Flash / JavaScript ® kesmek tasarım hedeflerine ulaşmak için çalıştık. Hiçbir şekilde bu bizim web tasarımları içine arzu yazı almak için yanlış bir yoldur, ama kesinlikle, bu en çok arzu edilen bir yol değildir. ve yıllar içinde web tasarımcısı, benim gibi, tamamen kendi tasarımları için on kadar yazı yararlanmıştır.
Web standartları ve yazı biçimleri son gelişmeleri aynı eski varsayılan yazı tipleri dışında yazı HTML metni oluşturmak mümkün kılar. "@ Font yüzü" CSS izleyen zamanlarda geliyor.
@ Font yüzü gerçek yazı dosyaya bağlantı ve web onu almak için bir çözüm provids. @ Font yüzü kullanarak, tasarımcılar arka plan görüntüleri gibi metin dondurmak zorunda kalmadan yazı tiplerini kullanabilirsiniz. Uygulanması, çok yalındır aşağıda gösterildiği gibi değil, bütün iyi şeyleri ona bir CON parçası olduğu gibi, TÜM tarayıcılar tek bir "yazı türü" destekler. Eğer çapraz tarayıcı desteği gerektiren sitesinde @ font yüzü kullanmayı planlıyorsanız, o zaman aynı çeşitli yazı türleri kaynaklardan sağlamak zorunda olacak.
@ Font yüzü kullanma
@ Font-face { font-family: 'CalligraphyFLFRegular'; src: url ('CalligraphyFLF.eot'); src: local ('CalligraphyFLF'), yerel ('CalligraphyFLF'), url ('CalligraphyFLF.woff') formatında ('ATKI'), url ('CalligraphyFLF.ttf') formatında ('truetype'), url ('CalligraphyFLF . svg # CalligraphyFLF ') formatında (' svg '); } @ Font-face { font-family: "Senin yazı"; src: url ("yazı / font_filename.eot"); src: local ("Alternatif isim"), yerel ("Alternatename"), url ("yazı / font_filename.woff") formatında ("ATKI"), url ("yazı / font_filename.otf") formatında ("açıştürü"), url ("yazı / # font_filename font_filename.svg") formatında ("svg"); } h2 {font-family: "Senin yazı", Gürcistan, serif;}
Eğer, yukarıdaki örnekte görebilirsiniz seçilen yazı yazı dahil olarak, bir aynı yazı için fonttypes bir dizi bağlamak için vardır. Bu nedenle insanlar "Yazı Takımı" olarak bakın.
Açıkça Son Kullanıcı Lisans Anlaşması (EULA) altında için CSS @ font-face özelliği ile bağlantı sağlayan edinilebilir Yazı Kitleri vardır.
Faydalı yazıtipinin Kaynaklar:
Photoshop ve Illustrator gibi araçlarla benim sınırlı beceri seti ile, ben dürüst ben bir tasarımcı daha olduğunu ben daha iyi geliştirici itiraf edebilirim. Ama çekirdek ile benim arka plan (sunucu tarafı) Java / PHP / COBOL ile kalkınma, benim UI geliştirme becerileri üzerinde çok olumlu bir etkisi olmuştur. Ben tasarımları oluştururken, demek ne, ben tasarım yapmak, yani zaman, ben HTML-CSS yaparken tasarımı en iyi HTML-CSS dönüştürülebilir ve nasıl düşünmek, ben arka uç teknoloji hakkında bir fikir vermek ve makul emin olun HTML kolayca XSL döngüler veya PHP vb parçacıkları içine uygulanabilir olduğunu
Yıllar içinde, muhtemelen donot HTML ya da CSS ne bir ipucu var UI tasarımcıları tarafından tasarımları üzerine kafa atılmış. Tüm bu yıllar ben sadece benim boğazına tasarım yaptığı "kod imkansız" şov çalışıyor tasarımcı, onun tasarım dönüştürülebilir ne biraz anlamak için bekliyorsanız, ben çok fazla soran olacağını düşünüyordum içine. BU sağ yardımcı olacak?
Sonra, ben bugün bu yazı üzerinde geldi ... Web tasarımcıları kim kod olamaz ... Teşekkürler Tanrım! Sadece aynı hissedenler birçok biriyim ... Yukarıda artitle biraz uzun soluklu olduğunu .. ama okuma, Her kelimeyi değer.
Elliot Jay Hisse teşekkürler ... Ben rahatladım hissediyorum!
İşte bazı alıntılar olduğu Elliots makale .
Dürüst olmak gerekirse, 2010 yılında yine kendi tasarımları kodu edemiyor 'web tasarımcıları' üzerinden geliyorum ki şok oldum. Hiçbir bahane.
... Benim tweet biraz daha spesifik olmam gerekirdi. Ben gerçek bir site içine düz bir tasarım açmak için bile en temel HTML ve CSS becerileri yok tasarımcılar bahsediyordu. Kasıtlı kodu tercih insanlar; kim yapamaz o. Ve ben de burada sadece ön uç kod bahsediyorum, tabii ki bu tasarımcıları da şaşırtıcı back-end programcılar olmalıdır düşünmek çok saçma ...
Biz kod imkansız Illustrator, 300dpi gönderilen 'web' tasarımları, hiçbir tutarlılığı / kullanılabilirlik olsun.
~ Amy Mahon
Geç oldu, ve ben bir şekilde bu kadar tamamlamayı var. Benimle aynı fikirde olan birçok olacak biliyorum ve benim niyetim kod yapamam kimseye hakaret veya üzgün değil, ama ben söylediklerinizi bazı delving her zaman gelip noktalarından bazılarını yansıtır umuyoruz Bu tartışmanın.
Günün sonunda, ben kod ve kim yapamaz kişiler üzerinde herhangi bir uyku kaybetmek istemiyorum. Ben sadece gerçekten bu geçmişe ait bir şey olduğunu düşündüm olarak, ön uç beceri eksikliği pek çok tasarımcı bulmak için şaşırıyorum.
I yazmak olarak da Yorum okuyup, yaklaşık 320 yorum vardı ... Bir okuma değer onlar.
Elliots tam yazı burada okuyun .. kodu edemiyor Web tasarımcıları
Radyo düğmesini ve metin satır içi olduğundan, bu yüzden metnin radyo düğmesini altına kendiliğinden düzeliyor olacak, metni biraz radyo düğmesi altında olduğu görünür.
Bu üst hizalamak istiyorsanız, divs veya açıklıklı (uygun) gibi ayrı kaplara radyo ve metin yere sahip olacak ve onlar uyum ilgilenir. Bu tasarım kısa bir izin ile, çok tablo hücreleri kullanmak daha kolay olacaktır.
Her zaman ne olursa olsun boyut sorunlarından olacaksa oluyor böylece her tarayıcı, biraz farklı radyolar görüntüler gibi bu, her tarayıcıda da aynı şekilde bakacağız.
HTML5 henüz bir taslak olduğunu. Ben bunları yazarken, 2004 yılında başlayan HTML 5, çalışmaları halen arasında ortak bir çaba ile şekillenmiş olan W3C HTML WG ve WHATWG . Sözcük sonraki gen HTML geliştirme ve özellikleri, sahip olacağı hangi olur yeni bir yapı ve anlam, form denetimleri, API'ler, multimedya etiketleri vb.
Basit İngilizce ... ne bize UI geliştiriciler için anlamına gelir ...
<body> <header> ... </ başlık> <nav> ... </ nav> <article> <section> ... </ Section> </ Article> <aside> ... </ kenara> <footer> ... </ footer> </ Body>
Yerine
<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>
örneğin
<video poster="poster.jpg"> <Kaynağı src = "video.3gp" type = "video/3gpp" Medya = "handheld"> src="video.mp4" type="video/mp4"> <kaynak </ Video> <audio> src="music.oga" type="audio/ogg"> <kaynak src="music.mp3" type="audio/mpeg"> <kaynak </ Audio>
Yeni sürüm daha birçok değişiklik / yükseltmeleri vardır ... Ben herhangi bir ilginç yararlı olanları yüceltilmesidir gelip bu yazı güncelleniyor tutacak .... Bu alanı izleyin
HTML 5 özellikleri gelişiminde aktif hala bu belge doğru bilgi sağlamayabilir. Eğer şüpheniz varsa, her zaman kontrol edin burada HTML 5 özellikleri .
Zaman ve tekrar tekrar, zaman davranmaya görülen tüm diğer tarayıcılar gibi w3c kuralları, bir sinir krizi atarak gelişim ruhu IE spiraller dışarı tarafından anlatılan, bir düzeltme var gibi görünmüyor. Sadece böyle bir IE7 bu konudur.
Problem Durumu:
Ben ve benzeri diğer ciddi web geliştiricileri birçok bazı bağlantılar (çapa etiketler) üzerinden vurgulu üzerinde düzeni içinde yüzen, orada iç içe pek çok kez, daha fazla fark etmiş olabilirsiniz, içeren konteyner sağa bir kaç piksel kaydırmak gibi görünüyor . Ben bu sorun için google çözümler denedi, ama neredeyse neden herhangi bir makul cevabı bulduk ve oluştuğunda (oluyor bu sorunu önlemek için yardımcı olacağı), dolayısıyla ben de soruna net bir çözüm bulmadım ...
Olası Çözüm:
Deneyim Out, ben bu konuda yanlış davranmaya konteyner CSS tanımında bir zum özelliğini ekleyerek sabit olduğu, yani kez bildirimi% 90 oranında var ...
# Somediv { zoom: 1; }
tekrar nedenleri belirsizdir ... Bu deneyin ...
IE bazı elemanları varsayılan olarak "gerçek" bir "hasLayout" özelliği var. Birçok görsel CSS davranışları, örneğin, bir alfa filtresi sadece o hasLayout bir öğe üzerinde çalışır. ve {Zoom: 1} hedef elemanları hasLayout özelliği vermek gibi görünüyor .... Faydalı? Dont olan ben öyle düşünüyorum ...
Zum özelliği de Chrome tarafından desteklenen görünüyor, ancak kullanımı kuvvetiyle benim düzeni üzerinde çok olumsuz etkisi gibi görünüyor ... sizin için çalışıyor, bu deneyin ... eğer bu olmuyorsa, "CSS craps" altında bu sayfayı işaretleyin
