2011 7 Juli 2011

Pertanyaan tentang CSS hack

Telah membaca di blog ini beberapa ... pikir itu bagus untuk katalog ini untuk ref masa depan .... juga bisa menjadi pertanyaan wawancara penting bahwa Anda akan bertanya suatu hari ....

Menulis potongan CSS yang akan menampilkan ayat dengan warna biru di browser lama, merah di browser yang lebih baru, hijau dan hitam di IE6 di IE7

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


2011 18 Februari 2011

IE Kesalahan Javascript: Objek tidak mendukung properti atau metode

Punya masalah aneh, di mana sepotong Javascript bekerja dengan baik di semua browser sebagai oz IE bar biasa :) Sederhana ... itu, tapi karena naskah tidak ditulis oleh saya, Butuh waktu untuk debug ini "Objek tidak mendukung properti atau metode" kesalahan yang hanya IE muntah. Mungkin! Jika saya menulis script, saya tidak akan menjumpai kesalahan ini sama sekali, karena tidak campuran nama variabel saya dengan bidang Id :).

Masalah: Objek tidak mendukung properti atau metode (pada baris 3)

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

Solusi:
Kesalahan yang dihasilkan pada thirdrow dalam contoh di atas (Jalur 3 ... "shortdesc = document.getE ...."). Saya mencoba semua jenis hal-hal bodoh, yang aku nggak bahkan layak disebutkan di sini dan akhirnya coba tebak! hanya mengubah var shortdesc ke sesuatu yang lain menyingkirkan kesalahan. Pada dasarnya! Nama variabel harus berbeda dari fieldID


2010 20 Mei 2010

Re-Bersepeda CSS: A Look At Kerangka CSS

Re-Bersepeda adalah Buzzword dan In Web Development artinya tidak berbeda. Ini menghemat energi, dalam hal upaya!

Selama tahun menulis CSS dan HTML dari membuat desain, saya telah mengikuti beberapa praktik terbaik, dalam mengejar menghemat waktu dan energi dalam apa yang biasanya kita istilah sebagai "Re-Inventing the Wheel". Waktu dan waktu lagi, saya berkata pada diriku sendiri, bahwa saya harus membuat template, beberapa CSS yang dapat digunakan kembali standar yang saya akan menggunakan DARI BOX dalam pekerjaan masa depan saya. Meskipun tidak sepenuhnya tapi aku berhasil mencapai beberapa tujuan.

Dalam memajukan, Re-Gunakan CSS, saya telah melihat kerangka CSS beberapa yang umum tersedia bagi kita dan memutuskan untuk menempatkan mereka untuk digunakan, karena ini dicoba dan diuji dan diciptakan oleh pengembang berpengalaman banyak, dari diriku sendiri. Lebih penting "AVOID Perombakan".

Meskipun pengetahuan umum untuk para veteran, saya telah mencoba untuk menulis beberapa kunci konsep / praktik terbaik / pikiran yang telah dilakukan untuk menciptakan kerangka kerja ini, untuk membuat RE-CYCLING CSS mungkin. Berharap ini akan membantu beberapa pengembang CSS yang baru saja akan dan baru-baru naik kereta musik CSS!

Tombol Re-bersepeda dari CSS:

Gunakan Konvensi Penamaan

Hal ini menjadi faktor yang paling penting dalam membuat CSS / HTML yang dapat digunakan kembali. Memberikan nama yang konsisten untuk elemen halaman memungkinkan penggunaan kembali komponen halaman dan gaya mereka dengan sedikit atau modifikasi. Sejalan dengan argumen ini, Bahkan HTML5, dalam perubahan perubahan besar atas pendahulunya, adalah untuk memperkenalkan beberapa tag yaitu struktural. <article>, <section>, <header>, <aside>, dan <nav> [ Apa yang akan membawa HTML5? ]. Bahkan dengan HTML 4 (atau lebih rendah), yang terbaik untuk nama bagian standar dari halaman Anda consistanly seperti dalam contoh sederhana di bawah ini ...

Ingat, Sebagian besar halaman pada proyek Anda, akhirnya memiliki unsur-unsur inti yang sama struktural. Mengidentifikasi unsur-unsur inti halaman umum ....

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

Ulang Styles Default (CSS Reset): Apakah Anda menggunakan kerangka atau menulis sendiri, Anda harus menyediakan CSS Mereset [ Apa CSS Mereset? ], karena mereka mengurangi atau kadang-kadang menghilangkan inkonsistensi visual yang terjadi antara berbagai browser. Dengan kata sederhana Mekanisme ulang CSS menetapkan gaya Elemen HTML untuk nilai nol atau nol, sehingga mengesampingkan nilai-nilai default browser mereka mungkin pose. Ini memberikan yang bersih untuk mengatur sifat-sifat kekosongan dari setiap elemen User-Agent Defaults [ CSS2.1 Pengguna Default Style Agen Lembar ]. Semua kerangka CSS punya mekanisme reset. Jika Anda menulis Anda sendiri CSS Mereset, kata hati-hati adalah bahwa jika Anda kebetulan lupa untuk me-reset properti kunci, Ini bisa menyebabkan lintas-browser isu, yang sangat sulit untuk debug. Ingat, Menyimpan salinan dari gaya reset dan menjatuhkan mereka ke dalam setiap proyek baru Anda buat.

  tubuh, div, dl, dt, dd, ul, ol, li,
  h1, h2, h3, h4, h5, h6,
  pra, bentuk, fieldset, input, select, textarea,
  p, blockquote, meja, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Set Default (Styles baseline) untuk Elemen:

Setelah Anda telah mengatur (nol atau null) Nilai default dari atribut tertentu Elemen HTML tertentu, Hal ini diperlukan untuk menerapkan beberapa gaya di setiap contoh unsur-unsur. Pengaturan standar ini bisa bervariasi sesuai desain atau menurut praktek-praktek terbaik yang Anda ikuti.

Kebanyakan CSS kerangka kerja, selalu memperkenalkan beberapa default baru, selain ulang gaya default browser.
Default ini menjadi kosong dari User-Agent Defaults (dilucuti oleh Reset CSS), ini akan konsisten di seluruh browser.

Ingat, gaya baseline digunakan untuk mengatur gaya yang akan digunakan desain-lebar. misalnya.

  html {font-size: 77%; font-family: Arial, sans-serif;}
 kuat, h1, h2, h3, h4, h5, h6 {font-weight: bold;} 

Abstrak Styles untuk Komponen HTML umum dan Kelas Umum:

Kebanyakan proyek yang terdiri dari beberapa halaman akan memiliki elemen HTML yang umum digunakan di seluruh situs, untuk misalnya Semacam bentuk, peringatan dan kesalahan, Popup Custom, lightboxes dll Karena komponen tersebut digunakan lagi di seluruh proyek, Ini akan berguna untuk memberikan set kelas yang terkait dengan gaya standar untuk komponen dan Anda dapat menyimpan sendiri banyak waktu.

Selain menentukan definisi gaya dapat digunakan kembali untuk Komponen HTML umum, kita bisa abstrak gaya kelas yang berkaitan dengan tipografi, warna atau bahkan tata letak. Saya sendiri cenderung Anda gunakan ... kelas umum seperti Clearfix,, Font08 FontGrey, AlignL, DisplayB dll

  bentuk masukan {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; height: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 bentuk textarea {border: 0px; background: # ffffff; color: # 000000; font-size: 0,9 em; line-height: 1.5em; overflow: terlihat;}
 Fbold {font-weight: bold; color: # cccccc;}.
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 Clearfix {clear: both;}.
 Pembagi {border-top: 1px solid # 647B06; border-bottom: 1px # 9CC00A padat; height: 0px;}.
 Displayb {display: block;}. Displayn {display: none;}.
 Alignr {text-align: right}.. Alignc {text-align: center}
 Floatr {float: right;}. Floatl. {Float: left;} 

Perbaikan untuk quirks browser yang umum

Berbagai browser menerapkan kode CSS dan memberikan berbagai tingkat dukungan untuk spesifikasi CSS. Hasil ini .... "Browser quirks", bahwa kita pengembang yang tersisa untuk mengatasi. Terutama, IE6 menghantui coders paling CSS dengan batas waktu untuk bertemu. Kabar baiknya adalah pengalaman telah menghimpun perbaikan dapat digunakan kembali mungkin untuk masalah ini (Sering disebut sebagai CSS Hacks ).

Ingat, Simpan hacks / perbaikan berguna

  / * Zoom berikut: 1 aturan ini khusus untuk IE6 + IE7.  * /
    * Html. Clearfix,
    *:. Pertama anak + html clearfix {
           zoom: 1;
      } 

Jauhkan Refining CSS Anda

  • Kebiasaan kembali bersepeda tidak akan datang kepada Anda dalam hari. Ini harus dikembangkan. Jadi Anda berencana Re-Bersepeda. Ingatlah hal ini bahwa Anda bisa default abstrak gaya, definisi tipografi, Layouts, Styles Elemen HTML dll Cobalah untuk berpikir ke depan.
  • Juga melihat kembali proyek-proyek masa lalu Anda, ini akan membantu mengidentifikasi gaya yang Anda cenderung sering digunakan di seluruh porjects. Abstrak itu.
  • Hapus semua gaya yang tidak terpakai. Praktek ini akan menjaga kerangka CSS dari gejala yang umum disebut "Kembung" -
  • Hapus gaya berulang-ulang.
  • Membangun satu set gaya yang cukup fleksibel untuk port di seluruh proyek.

A Look At Kerangka CSS

Akhirnya. Jika Anda terinspirasi dan berniat untuk menggunakan satu atau lebih kerangka CSS, Heres adalah daftar cepat dari yang populer beberapa ....

  • 960 Grid System : Sistem Grid 960 merupakan upaya untuk merampingkan alur kerja pengembangan web dengan memberikan dimensi yang umum digunakan, berdasarkan lebar 960 piksel. Ada tiga varian: 12, 16 dan 24 kolom, yang dapat digunakan secara terpisah atau bersama-sama. Pemikiran bahwa tidak ada yang Anda tidak dapat membuat satu untuk Anda sendiri cukup mudah, Kerangka kerja ini menyediakan template grid untuk cetak dalam format PDF, yang dapat digunakan untuk membuat sketsa designs.Bet halaman Anda, Akan membuat kesan profesional, jika Anda membawa beberapa lembar ketika Anda pergi ke klien untuk mengumpulkan persyaratan UI. Ini juga menyediakan template jaringan dasar untuk software desain populer seperti Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, dll menyediakan "starter untuk sepuluh" untuk memulai pekerjaan desain Anda.
  • Cetak Biru : Cetak Biru menyediakan jelas diklasifikasikan file CSS untuk Mengatur ulang, Grids, Formulir, Cetak, Tipografi, Plugin untuk tombol, tab dan sprite dll ini juga menyediakan dukungan untuk IE sebagai terpisah termasuk.
  • SenCSs : Tidak seperti dua di atas, SenCSs (Rasa diucapkan), tidak memiliki definisi CSS untuk Layout. Ini tidak termasuk font, bantalan, margin, tabel, daftar, header, blockquotes, bentuk dan banyak lagi.
  • BlueTrip : klaim aslinya untuk ketenaran adalah bahwa, itu adalah kombinasi fitur terbaik yang disediakan oleh kerangka kerja lain lain seperti oli cetak, perjalanan Biru ... dari mana ia mendapatkan namanya. Keunggulan ini termasuk 24-kolom grid, gaya tipografi, gaya orm, mencetak, tombol dll
  • YUI Grids : Dibawa ke anda oleh Developer Network Yahooo, mendukung cairan lebar (100%) layout serta telah ditetapkan fixed-width layout di 750px, 950px dan 974px, dan kemampuan untuk dengan mudah menyesuaikan untuk nomor apapun. Seperti yang Anda lihat, Its teknis hanya Komponen layout. YUI juga disediakan HTML / CSS set untuk elemen halaman lain
  • YAML (Yet Another multicolumn Tata Letak)
  • Emastic

Ingat, menggunakan kerangka CSS tidak berarti bahwa Anda malas untuk membuat satu sendiri ... Ini menyiratkan bahwa Anda cerdas untuk belajar dari pengalaman orang lain & kesalahan, SAVE TIME dan KENAIKAN PRODUKTIVITAS!


2010 13 Maret 2010

@ Fontface: Mengekspresikan dengan font pilihan Anda; Menggunakan Webfonts

CSS selesai keberadaan 10 tahun tahun ini! Mereka yang telah sekitar untuk sementara waktu, mendapatkan roti mereka (atau tidak) menggunakan CSS, maka Anda mungkin menyadari bagaimana kita telah kelaparan untuk pilihan font. Bahkan dengan kurangnya font desainer seperti yang di CSS Zen Garden telah memanfaatkan gambar latar belakang CSS untuk mengganti font dalam mengejar keadilan melakukan beberapa desain mereka. Kami juga mencoba Flash / JavaScript ® hacks untuk mencapai tujuan desain kami. Dengan tidak ini adalah cara yang salah untuk mendapatkan font yang kita inginkan ke dalam desain web kami, tapi jelas, itu bukan cara yang paling diinginkan. dan lebih dari web designer tahun, seperti saya, telah sepenuhnya mengandalkan sepuluh atau lebih font untuk desain mereka.

Perkembangan terkini dalam standar web dan format font yang memungkinkan untuk membuat teks HTML dalam tipografi selain huruf default yang sama tua. Datang dalam decleration "fontface @" CSS.

@ Fontface provids solusi untuk link ke file font aktual dan mengambilnya dari web. Menggunakan @ fontface, desainer dapat menggunakan font tanpa harus membekukan teks sebagai gambar latar belakang. Implementasi sangat lurus ke depan, seperti yang ditunjukkan di bawah ini tapi karena semua hal baik memiliki bagian CON untuk itu, TIDAK SEMUA browser mendukung "jenis font" tunggal. Jika Anda berencana untuk menggunakan fontface @ di situs dengan memerlukan dukungan cross browser, maka Anda akan harus menyediakan sumber untuk jenis font-macam sama.

  1. TrueType - Sebuah format yang dirancang untuk terlihat baik di layar. Direkomendasikan terutama untuk Windows browser (Chrome).
  2. OpenType (CFF) - Format ini lebih baik untuk pekerjaan cetak dan tidak selalu terlihat baik pada Windows.
  3. EOT - Anda perlu format ini jika Anda ingin menargetkan Internet Explorer. IE tidak akan menggunakan format lain. EOT kita akan dianggap "Lite", karena mereka tidak dikompresi atau domain-dibatasi.
  4. SVG - Ini adalah format XML yang didukung oleh beberapa browser termasuk iPhone.
  5. WOFF - Ini cross-browser, web hanya format font adalah ringan (data font yang dikompresi zip) dan dapat dikompilasi dengan baik TrueType atau PostScript (CFF) menguraikan. Hal ini saat ini didukung oleh FireFox 3.6 +.

Menggunakan @ fontface

  @ Font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: lokal ('CalligraphyFLF'), lokal ('CalligraphyFLF'), format url ('CalligraphyFLF.woff') ('WOFF'), url ('CalligraphyFLF.ttf') format ('truetype'), url ('CalligraphyFLF . svg # CalligraphyFLF ') format (' svg ');
 }
 @ Font-face {
   font-family: "jenis huruf Anda";
   src: url ("font / font_filename.eot");
   src: lokal ("nama alternatif"), lokal ("Alternatename"),
     url ("font / font_filename.woff") format ("WOFF"),
     url ("font / font_filename.otf") format ("OpenType"),
     url ("font / font_filename.svg # font_filename") format ("svg");
   }
 h2 {font-family: "jenis huruf Anda", Georgia, serif;} 

Seperti yang Anda lihat dari contoh di atas, untuk menyertakan jenis huruf font yang dipilih, kita harus link ke satu set fonttypes untuk jenis huruf yang sama. Oleh karena itu orang menyebutnya sebagai "Kit Font".
Ada Kit font yang tersedia yang secara eksplisit memungkinkan menghubungkan dengan properti CSS @ font-face kepadanya berdasarkan Perjanjian Lisensi Pengguna Akhir (EULA).

Berguna WebFont Sumber:

  • Tersedia untuk @ font-face embedding font di halaman wiki http://webfonts.info/wiki/index.php?title=Main_Page
  • Ray Larabie . Dia adalah seorang desainer font yang terkenal yang telah membuat ratusan font TrueType menarik tersedia secara bebas untuk digunakan di web. Font-Nya yang elegan, dekoratif, dan lucu.
  • Dieter Steffmann lain desainer font yang besar. Dia juga telah membuat font yang indah yang tersedia bagi siapa saja untuk digunakan.
  • Font toko : menawarkan font yang dirancang khusus untuk menggunakan web. Lebih dari 30 keluarga FontFont paling sukses adalah sekarang tersedia sebagai FontFonts Web. FontShop juga memiliki pengguna WebFont rinci panduan http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  • Font Squirrel : Menampilkan semua font yang Font Squirrel menawarkan untuk digunakan dengan @ font-face embedding CSS. Squirrel font menawarkan kuantitas mengesankan jenis, membuatnya mati sederhana untuk memilih salah satu keluar, dan dgn mudah menawarkan "kit" - jenis huruf pilihan Anda, dalam beberapa format, dikemas dengan demo HTML & CSS yang menggunakan saat ini sangat @ font-face sintaks . Mereka juga menawarkan cara untuk membuat sendiri @ font-face kit . Jika jenis huruf yang akan digunakan telah dilisensi tepat (orang yang datang dengan komputer Anda tidak selalu oke), generator menghasilkan EOT, SVG, dan hey! File WOFF.

2010 9 Maret 2010

Its tentang "desainer Web yang tidak dapat kode"

Dengan terbatasnya kemampuan set-saya dengan tool seperti Photoshop dan Illustrator, jujur ​​saya mengakui bahwa saya adalah seorang pengembang yang lebih baik dari saya seorang desainer. Tapi latar belakang saya dengan inti (sisi server) pengembangan dengan Java / PHP / COBOL, telah menjadi pengaruh yang sangat positif pada keterampilan UI pembangunan. Yang saya maksud adalah, sekaligus menciptakan desain saya, yaitu setiap kali saya melakukan desain, saya berpikir tentang bagaimana desain dapat dikonversi terbaik ke dalam HTML-CSS dan saat melakukan HTML-CSS, saya memberikan pemikiran tentang teknologi backend dan membuat cukup yakin bahwa HTML dapat dengan mudah diimplementasikan ke dalam XSL loop atau PHP potongan dll

Selama bertahun-tahun, saya telah dilemparkan ke kepala desain oleh desainer UI yang mungkin donot memiliki petunjuk apa HTML atau CSS. Bertahun-tahun saya sudah berpikir bahwa saya akan meminta terlalu banyak, Jika aku hanya mengharapkan desainer, yang mencoba shov "tidak mungkin untuk kode" nya desain ke tenggorokan, untuk memahami sedikit apa desain nya akan dikonversi ke dalam. BAHWA akan membantu kan?

Kemudian, saya datang di posting ini hari ini ... desainer Web yang tidak dapat kode ... Terima kasih Tuhan! Aku hanya salah satu dari banyak yang merasakan hal yang sama ... The artitle atas adalah sedikit panjang lebar .. tapi layak baca, setiap kata itu.

Terima kasih Elliot Saham Jay ... saya merasa lega!

Berikut adalah beberapa kutipan dari artikel Elliots .

Wow, apa sehari! Ini dimulai dengan satu menciak sedikit dan berakhir dengan diskusi yang seolah menyapu seluruh komunitas desain web secara keseluruhan. Tampaknya ada beberapa pendapat yang sangat kuat dipegang tentang masalah apakah web designer harus dapat kode.
...
Jadi, sebelum kita masuk ke dalam ini, izinkan saya untuk cepat rekap apa yang saya katakan pada pagi ini di Twitter:

Jujur, saya terkejut bahwa pada tahun 2010 aku masih datang di 'web designer' yang tidak dapat kode desain mereka sendiri. Alasan.

... Aku seharusnya menjadi sedikit lebih spesifik dalam tweet saya. Aku sedang berbicara tentang desainer yang tidak memiliki bahkan HTML dasar dan keterampilan CSS untuk mengubah desain datar ke situs yang sebenarnya. Tidak banyak orang yang dengan sengaja memilih untuk tidak kode; mereka yang tidak bisa. Dan aku juga mengacu hanya untuk front-end kode di sini, tentu saja itu konyol untuk berpikir bahwa desainer juga harus luar biasa back-end programmer ...

Kami mendapatkan 'web' desain dikirim dalam Illustrator, 300dpi, mungkin untuk kode, tidak ada konsistensi / kegunaan.
~ Amy Mahon

Sudah larut, dan aku harus menyelesaikan ini, entah bagaimana. Aku tahu akan ada banyak yang tidak setuju dengan saya, dan niat saya bukan untuk menyinggung atau mengganggu orang yang tidak dapat kode, tapi saya berharap bahwa beberapa dari apa yang saya katakan mencerminkan beberapa poin yang selalu muncul ketika menggali perdebatan ini.

Pada akhir hari, saya tidak kehilangan tidur atas yang dapat kode dan yang tidak bisa. Aku hanya benar-benar terkejut menemukan begitu banyak desainer yang tidak memiliki front-end keterampilan, karena saya pikir ini adalah sesuatu dari masa lalu.

Baca juga komentar, ada sekitar 320 komentar, karena saya menulis ... mereka layak membaca.
Silahkan membaca posting lengkap di sini Elliots .. Web desainer yang tidak dapat kode


2010 4 Maret 2010

Menyelaraskan tombol radio dengan teks

Sejak tombol radio dan teks yang inline, sehingga teks akan sejajar sendiri ke bagian bawah tombol radio, Teks akan tampak sedikit di bawah tombol radio.
Jika Anda ingin ini untuk menyelaraskan ke puncak, Anda harus menempatkan radio dan teks ke dalam wadah terpisah seperti divs atau rentang (apabila diperlukan) dan mereka akan mengurus pelurusan. Akan lebih mudah untuk menggunakan sel tabel juga, singkat desain Anda mengijinkannya.

Ini tidak akan terlihat sama di setiap browser, karena setiap browser menampilkan radio sedikit berbeda, sehingga tidak selalu akan menjadi masalah ukuran tidak peduli apa yang Anda lakukan.


2010 8 Januari 2010

Apa yang akan membawa HTML5?

HTML5 masih draft. Saat saya menulis, Bekerja pada HTML 5, yang dimulai pada tahun 2004, masih diberi bentuk dengan upaya bersama antara W3C HTML WG dan WHATWG . Kata adalah bahwa gen berikutnya HTML akan memiliki tambahan dan fitur, yang akan baru struktur dan semantik, bentuk kontrol, API, multimedia tag dll.

Dalam bahasa Inggris sederhana ... apa artinya bagi kami pengembang UI ...

  • Akan ada penambahan beberapa tag yaitu struktural. <article>, <section>, <header>, <aside>, dan <nav>, yang akan menggantikan sebagian besar <div> s digunakan pada halaman web, membuat halaman Anda sedikit lebih semantik, tetapi yang lebih penting, lebih mudah untuk dibaca.
    Hei! Bayangkan saja upaya disimpan dalam menemukan tag yang satu DIV hilang dekat.
    misalnya
  <body>
   <header> ... </ header>
   <nav> ... </ nav>
   <article>
     <section>
       ...
     </ Section>
   </ Artikel>
   <aside> ... </ samping>
   <footer> ... </ footer>
 </ Body> 

Daripada

  <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> 
  • Dengan munculnya audio dan konten video seperti YouTube, penggunaan multimedia yang terdapat pada halaman web telah increaded oleh kali lipat. Mengambil ini ke account, Sekarang rencananya adalah untuk menambahkan dukungan asli untuk embedding video dan audio ke dalam browser itu sendiri, maka memungkinkan pengguna untuk memutar, jeda, berhenti, mencari, dan menyesuaikan volume dengan menggunakan builtin DOM API untuk script untuk mengontrol pemutaran.

misalnya

  <video poster="poster.jpg">
     <Sumber src = "video.3gp" type = "video/3gpp"
     media = "handheld">
         <source src="video.mp4" type="video/mp4">
 </ Video>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 </ Audio> 
  • Lebih baik didefinisikan peran semantik untuk elemen yang ada untuk misalnya. <strong> dan <em> sekarang mungkin benar-benar memiliki arti yang berbeda yaitu mereka akan berperilaku berbeda.

Ada banyak perubahan lebih / upgrade ke versi lebih baru ... akan terus mengupdate posting ini karena saya datang di seluruh apa pun yang menarik dan bermanfaat .... Lihat saja nanti

Dokumen ini tidak dapat memberikan informasi yang akurat sebagai spesifikasi HTML 5 masih aktif dalam pembangunan. Jika ragu, selalu memeriksa spesifikasi HTML 5 di sini .


2009 7 November 2009

CSS ZOOM - Namun lain kekhasan IE; Pergeseran pixel 3

Waktu dan lagi, Ketika semua browser lain terlihat berperilaku seperti yang diceritakan oleh aturan W3C, spiral IE Anda keluar dari semangat pembangunan dengan emosi yang meledak, yang tampaknya tidak memiliki memperbaiki. Hanya orang seperti itu adalah masalah di IE7.

Soal Pernyataan:
Saya dan mungkin banyak pengembang web lain serius telah memperhatikan lebih dari banyak kali, bahwa ketika ada bersarang mengapung dalam tata letak, di hover lebih beberapa link (anchor tag), wadah yang mengandung tampaknya bergeser beberapa piksel ke kanan . Saya telah mencoba untuk google untuk solusi masalah ini, tapi hampir tidak ditemukan adanya jawaban yang masuk akal mengapa dan ketika itu terjadi (yang mungkin bisa membantu untuk mencegah masalah ini terjadi), maka saya tidak pernah menemukan solusi yang jelas untuk masalah baik ...

Kemungkinan Solusi:
Dari pengalaman, saya memiliki persen pemberitahuan 90% yaitu kali, bahwa masalah ini adalah tetap dengan menambahkan properti zoom dalam definisi CSS wadah salah berperilaku ...

 # Somediv {
       zoom: 1;
 }

lagi alasan tidak jelas ... coba ini ...
Beberapa elemen di IE memiliki "hasLayout" properti, yang "benar" secara default. Banyak visual yang CSS perilaku, misalnya, filter alpha hanya bekerja pada sebuah elemen yang hasLayout. dan {Zoom: 1} tampaknya memberikan elemen target properti hasLayout .... Berguna? Aku nggak berpikir begitu ...

Properti zoom juga tampaknya didukung oleh Chrome, tapi berkat penggunaannya tampaknya membuat banyak efek buruk pada layout saya ... mencobanya, Jika berhasil untuk Anda ... jika tidak, bookmark halaman ini di bawah "craps CSS"


2009 18 Oktober 2009

HTML & XHTML

  • Deklarasi Tipe Dokumen perlu hadir pada awal sebuah dokumen yang menggunakan sintaks HTML. Secara opsional dapat digunakan dalam sintaks XHTML, tapi tidak diperlukan. Dokumen XHTML tidak perlu menyertakan DOCTYPE karena XHTML dokumen yang disampaikan benar menggunakan tipe MIME XML dan diproses sebagai XML oleh browser, selalu diberikan tidak dalam mode quirks.
  • Dalam XHTML, nama tag adalah case sensitif dan biasanya didefinisikan yang akan ditulis dalam huruf kecil. Dalam HTML, bagaimanapun, nama tag adalah case insensitive dan dapat ditulis dalam semua kasus huruf besar atau campuran, meskipun konvensi yang paling umum adalah untuk tetap dengan huruf kecil. Kasus tag awal dan akhir tidak harus sama, tetapi menjadi tidak konsisten membuat bersih tampilan kode.

MANFAAT MENGGUNAKAN HTML

  • Kompatibel dengan browser yang ada
  • Penulis sudah akrab dengan sintaks
  • Sintaks toleran dan memaafkan berarti tidak akan ada pengguna bermusuhan " Layar Kuning Kematian "jika kesalahan sengaja tergelincir melalui
  • Sintaks singkatan nyaman, penulis misalnya dapat menghilangkan beberapa tag dan nilai atribut

MANFAAT MENGGUNAKAN XHTML

  • Ketat sintaks XML mendorong penulis untuk menulis markup well-formed, yang beberapa penulis mungkin menemukan lebih mudah untuk mempertahankan
  • Terintegrasi langsung dengan kosakata XML lain, seperti SVG dan MathML
  • Memungkinkan penggunaan XML Processing, yang beberapa penulis gunakan sebagai bagian dari penyuntingan mereka dan / atau proses penerbitan

2009 28 Juli 2009

CSS2.1 Pengguna Default Style Sheet Agen

Kemarin, setelah masalah yang saya temui dengan Mereset CSS di Google Chrome ... Saya pikir menggali sedikit lebih dalam bidang Style Sheets User Agent ...
Ditemukan tabel ini pada nilai-nilai default dari CSS2.1 Lembar User Agent Gaya ... (bagi mereka tidak menyadari apa "Lembar User Agent Style" adalah mengikuti apa Pengguna Style Sheets Agen (Spesifikasi) .

Untuk daftar lengkap dari CSS 2,1 Agen Style Sheets Pengguna default klik di sini


NDK rumah | Mengekspresikan TI | Langit-langit Mulut Mengekspresikan | Penmenship Mengekspresikan | Awe Mengekspresikan | Mengekspresikan Diriku