การแสดงไอที

ได้อ่านในบล็อกนี้บาง ... คิดว่ามันเป็นที่ดีที่จะแคตตาล็อกนี้ไว้เพื่ออ้างอิงในอนาคต .... ยังอาจเป็นคำถามสัมภาษณ์สิ่งสำคัญที่คุณจะถามบางวัน ....

เขียนตัวอย่างของ CSS ที่จะแสดงวรรคสีน้ำเงินในเบราว์เซอร์รุ่นเก่าสีแดงในเบราว์เซอร์รุ่นใหม่สีเขียวใน IE6 และ IE7 ในสีดำ

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

มีปัญหานี้แปลกที่ชิ้นส่วนของจาวาสคริทำงานได้ดีในทุก ans เบราว์เซอร์เป็น IE แถบปกติ ... ง่ายๆก็คือ แต่เนื่องจากสคริปต์ไม่ได้เขียนโดยฉันจะเอาในขณะที่จะแก้ปัญหานี้ "วัตถุไม่สนับสนุนคุณสมบัตินี้หรือวิธี" ข้อผิดพลาดว่ามีเพียง IE ถูกขว้างปาขึ้น น่าจะเป็น! ถ้าฉันจะเขียนสคริปต์ที่ฉันจะไม่ได้มีข้อผิดพลาดนี้ที่ทุกคนเป็นไม่ผสมชื่อตัวแปรของฉันกับเขตข้อมูลหมายเลข :)

ปัญหา: วัตถุไม่สนับสนุนคุณสมบัตินี้หรือวิธี (เมื่อ 3 บรรทัด)

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

Solution:
ข้อผิดพลาดถูกสร้างขึ้นบน thirdrow ในตัวอย่างข้างต้น (3 สาย ... "shortdesc = document.getE .... ") ฉันพยายามทั้งหมดเรียงจากสิ่งที่โง่ที่ฉัน dont ก็คุ้มค่าที่กล่าวถึงที่นี่และในที่สุดก็คาดเดาสิ่งที่! เพียงแค่เปลี่ยน var shortdesc ไปอย่างอื่นได้กำจัดข้อผิดพลาด โดยทั่วไป! ชื่อตัวแปรที่จะมีความแตกต่างจาก fieldID

ไม่กี่ชั่วโมงตอนนี้ฉันได้รับการมองที่การแก้ปัญหาในการทำงาน / ทดสอบ HTMLs ของฉันคงอยู่ในโปรแกรมจำลอง Eclipse / Android ยังไม่ได้ประสบความสำเร็จโดยสิ้นเชิงยัง .... สิ่งที่ฉันหมายถึงโดย "Totally" เป็น HTML ได้รับการโหลด OK แต่ทั้งหมด CSS และ JS คือการแสดงออกของภาพจะไม่เห็น ในคำให้นักพัฒนา, CSS ไม่ได้ถูกนำไปใช้กับหน้า ...

คิดว่ามันจะขอสมัครไม่กี่พัฒนา Android UI, ถ้าผมตั้งข้อสังเกตตัวอย่างลงที่ฉันใช้ในการแสดง HTM​​L

และ gurus Android โปรดเพิ่มความคิดเห็นของคุณเพื่อช่วยให้เราพัฒนาสามเณรใน UI โปรแกรมมือถือต่อไป!

ขออภัย! แต่ Im สมมติว่าคุณทราบวิธีการสร้างแอพลิเคชันบนมือถือ Android ใน Eclipse

สร้างนี้เป็นกิจกรรมของคุณนี้จะอ่าน '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();    }  } } 

Re ขี่จักรยานเป็น Buzzword และในการพัฒนาเว็บก็หมายความว่าไม่แตกต่างกัน มันอนุรักษ์พลังงานในแง่ของความพยายาม!

กว่าปีของการเขียน CSS และ HTML สร้างจากการออกแบบที่ผมได้ปฏิบัติตามวิธีปฏิบัติที่ดีที่สุดไม่กี่ในการแสวงหาของการประหยัดเวลาและพลังงานในสิ่งที่เรามักระยะขณะที่ "Re-ประดิษฐ์ล้อ" เวลาและเวลาอีกครั้งที่ฉันได้บอกกับตัวเองว่าฉันจะต้องสร้างแม่แบบที่ไม่กี่บาง CSS ใหม่ใช้งานมาตรฐานที่ผมจะใช้ออกจากช่องในการทำงานในอนาคตของฉัน แม้ว่าไม่สมบูรณ์ แต่ฉันจัดการเพื่อให้บรรลุเป้าหมายบางอย่าง

ในการต่อไป, กลับมาใช้ของ CSS, ฉันได้ดูที่กรอบ CSS น้อยที่มักมีให้เราและตัดสินใจที่จะนำพวกเขาที่จะใช้เป็นเหล่านี้จะมีการทดลองและทดสอบและสร้างโดยนักพัฒนาที่มีประสบการณ์มากขึ้นกว่าตัวเอง ที่สำคัญ "หลีกเลี่ยงประดิษฐ์"

แม้ว่าความรู้ทั่วไปเพื่อทหารผ่านศึกที่ฉันได้พยายามที่จะใช้ปากกาบางคีย์แนวคิด / ปฏิบัติที่ดีที่สุด / ความคิดที่ได้ไปในการสร้างกรอบเหล่านี้เพื่อให้ RE ขี่จักรยานของ CSS ที่เป็นไปได้ หวังนี้จะช่วยให้นักพัฒนา CSS บางคนเป็นเพียงเกี่ยวกับการและเมื่อเร็ว ๆ นี้ผู้โดยสาร bandwagon CSS!

คีย์ Re การขี่จักรยานของ CSS:

ใช้การตั้งชื่อ

นี้จะต้องมีปัจจัยที่สำคัญที่สุดในการทำให้ CSS / HTML ใหม่ใช้งาน ให้สอดคล้องกับชื่อองค์ประกอบของหน้าช่วยให้กลับมาใช้ชิ้นส่วนหน้าและรูปแบบของพวกเขามีน้อยหรือการปรับเปลี่ยน ในบรรทัดที่มีอาร์กิวเมนต์นี้แม้ HTML5 ในการเปลี่ยนแปลงการเปลี่ยนแปลงที่สำคัญกว่ารุ่นก่อนของคือการแนะนำบาง ได้แก่ แท็กที่มีโครงสร้าง <article>, <section>, <header>, <aside> และ <nav> [ อะไร HTML5 จะนำมา? ] แม้แต่กับ HTML 4 (หรือต่ำ) ที่ดีที่สุดคือการตั้งชื่อส่วนมาตรฐานของหน้าเว็บของคุณ consistanly เช่นในตัวอย่างง่ายๆด้านล่าง ...

จำไว้หน้ามากที่สุดเกี่ยวกับโครงการของคุณท้ายมีองค์ประกอบหลักที่มีโครงสร้างเดียวกัน ระบุเหล่านี้องค์ประกอบของหน้าหลักที่พบบ่อย ....

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

รีเซ็ตลักษณะเริ่มต้น (CSS รีเซ็ต): ไม่ว่าคุณจะใช้กรอบหรือเขียนของคุณเองคุณจะต้องให้ CSS รีเซ็ต [ อะไร CSS รีเซ็ตคืออะไร? ] เช่นที่พวกเขาลดหรือขจัดความไม่สอดคล้องกันในบางครั้งภาพที่เกิดขึ้นระหว่างเบราว์เซอร์ต่างๆ ในคำง่ายๆกลไกรีเซ็ต CSS กำหนดรูปแบบขององค์ประกอบ HTML ไปเป็นค่าศูนย์หรือโมฆะจึงเอาชนะใด ๆ ที่เป็นค่าเริ่มต้นเบราว์เซอร์อาจจะโพสท่า นี้จะให้กระดานชนวนที่สะอาดเพื่อกำหนดคุณสมบัติของเหล่านี้เป็นโมฆะองค์ประกอบใด ๆ Defaults User-Agent [ ตัวแทนผู้ใช้ CSS2.1 Defaults สไตล์ชีต ] ทั้งหมดกรอบ CSS จะมีกลไกการตั้งค่าใหม่ ถ้าคุณเขียนคุณเอง CSS รีเซ็ต, คำเตือนก็คือว่าถ้าคุณเกิดลืมที่จะตั้งค่าคุณสมบัติที่สำคัญมันอาจนำไปสู่​​ปัญหาข้ามเบราว์เซอร์ที่มีความยากมากที่จะแก้ปัญหา จำไว้ว่าเก็บสำเนาของรูปแบบการตั้งค่าและวางไว้ในแต่ละโครงการใหม่ที่คุณสร้างขึ้น

  ร่างกาย, div, DL, DT, วัน, UL, ol, li,
  H1, H2, H3, H4, H5, H6,
  ก่อนฟอร์ม, fieldset, อินพุทให้เลือก, textarea,
  p, ยกข้อความทั้งย่อหน้า, ตาราง, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

ค่าเริ่มต้นของการตั้งค่า (ลักษณะพื้นฐาน) ถึงองค์ประกอบ:

หลังจากที่คุณได้ตั้งค่า (ให้เป็นศูนย์หรือ null) ค่าเริ่มต้นของคุณลักษณะบางอย่างขององค์ประกอบ HTML บางอย่างมันเป็นสิ่งจำเป็นในการใช้ลักษณะบางอย่างระหว่างอินสแตนซ์ขององค์ประกอบเหล่านี้ทุก ตั้งค่าเริ่มต้นเหล่านี้อาจแตกต่างกันไปตามการออกแบบหรือตามแนวทางปฏิบัติที่ดีที่คุณทำตาม

ส่วนใหญ่กรอบ CSS, เสมอแนะนำเริ่มต้นใหม่บางนอกเหนือไปจากรูปแบบการตั้งค่าเริ่มต้นเบราว์เซอร์
ค่าเริ่มต้นเหล่านี้เป็นโมฆะของค่าเริ่มต้นของ User-Agent (ปล้นไปโดยตั้งค่าใหม่ CSS) เหล่านี้จะสอดคล้องกันเบราว์เซอร์

โปรดจำไว้ว่ารูปแบบพื้นฐานที่ใช้ในการกำหนดรูปแบบที่จะนำมาใช้ในการออกแบบกว้าง ยกตัวอย่างเช่น

  html {font-size: 77%; font-family: Arial, sans-serif;}
 ที่แข็งแกร่ง, H1, H2, H3, H4, H5, H6 {font-น้ำหนัก: หนา;} 

ลักษณะบทคัดย่อสำหรับส่วนประกอบ HTML สามัญและระดับชั้นสามัญ:

โครงการส่วนใหญ่ประกอบด้วยหลายหน้าจะมีองค์ประกอบ HTML ทั่วไปที่ใช้ในเว็บไซต์สำหรับการจัดเรียงของรูปแบบการแจ้งเตือนและข้อผิดพลาด, ป๊อปอัปที่กำหนดเอง, LightBoxes ฯลฯ เช่นบางคนตั้งแต่องค์ประกอบดังกล่าวถูกนำมาใช้ซ้ำแล้วซ้ำอีกตลอดทั้งโครงการที่จะเป็นประโยชน์ในการให้บริการ ชุดชั้นเรียนที่เกี่ยวข้องกับรูปแบบที่กำหนดไว้ล่วงหน้าสำหรับส่วนประกอบเหล่านี้และคุณสามารถช่วยตัวเองมากเวลา

นอกเหนือจากการกำหนดรูปแบบที่นำมาใช้ซ้ำคำจำกัดความสำหรับคอมโพเนนต์ของ HTM​​L ร่วมกันเรียนรูปแบบนามธรรมที่เราสามารถที่เกี่ยวข้องกับวิชาการพิมพ์สีหรือแม้กระทั่งรูปแบบ ตัวผมเองมีแนวโน้มที่คุณใช้ ... ชั้นเรียนที่เหมือนกันเช่น Clearfix, Font08, FontGrey, AlignL, DisplayB ฯลฯ

  ใส่แบบฟอร์ม {border: 0px; พื้นหลัง: # FFFFFF; padding: 0px 10px; _padding: 0px 0px; ความสูง: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 แบบฟอร์ม textarea {border: 0px; พื้นหลัง: # FFFFFF; color: # 000000; font-size: .9 em; line-height: 1.5em; overflow: มองเห็นได้;}
 . fbold {font-น้ำหนัก: หนา; color: # cccccc;}
 . {color: # 666666;} fgrey
 . {color: # bbbbbb;} flightgrey
 . clearfix {clear: both;}
 แบ่ง {border-ชั้น: 1px solid # 647B06; พรมแดนด้านล่าง: 1px solid # 9CC00A; ความสูง: 0px;}.
 . displayb {display: block;}. displayn {display: none;}
 alignr {text-align: ขวา}.. alignc {text-align: ศูนย์}
 . floatr {ลอย: ขวา;}. floatl {float: left;} 

การแก้ไขการ quirks เบราว์เซอร์ทั่วไป

เบราว์เซอร์ต่าง ๆ ใช้รหัส CSS และให้แตกต่างกันระดับของการสนับสนุนสำหรับคุณสมบัติของ CSS ผลจากการนี​​้ .... "Quirks เบราว์เซอร์" ว่านักพัฒนาที่เรามีเหลือที่จะแก้ไขปัญหา โดยเฉพาะอย่างยิ่ง IE6 หลอกหลอนผู้เขียนโคด CSS ส่วนใหญ่ที่มีกำหนดเส้นตายที่จะตอบสนอง ข่าวดีก็คือประสบการณ์ที่ได้มาร่วมกันแก้ไขไปได้ที่จะนำมาใช้ซ้ำปัญหาเหล่านี้ (เรียกว่าบ่อยครั้งที่เป็น CSS Hacks )

จำไว้ให้เหล่าแฮ็แก้ไข / ประโยชน์

  / * ซูมต่อไปนี้กฎข้อที่ 1 เป็นพิเศษสำหรับ IE6 + IE7  * /
    html *. clearfix,
    *:. แรกของเด็ก-+ HTML clearfix {
           ซูม: 1;
      } 

ให้กลั่น CSS ของคุณ

• นิสัยของการขี่จักรยาน Re-จะไม่มาถึงคุณในวัน มันจะต้องมีการพัฒนา ดังนั้นการวางแผน Re ขี่จักรยานของคุณ หมีในใจที่คุณสามารถเริ่มต้นรูปแบบนามธรรมคำจำกัดความตัวอักษรแบบ, ลักษณะองค์ประกอบ HTML เป็นต้นพยายามที่จะคิดล่วงหน้า
• ยังมองกลับไปที่โครงการที่ผ่านมาของคุณก็จะช่วยในการระบุลักษณะที่คุณมักจะใช้มักจะเจอ porjects บทคัดย่อมัน
• ลบออกไม่ได้ใช้รูปแบบใด ๆ การปฏิบัตินี้จะทำให้กรอบ CSS ของคุณจากอาการที่พบบ่อยเรียกว่า "bloating" -
• ลบออกรูปแบบที่ซ้ำ ๆ
• สร้างชุดของรูปแบบที่มีความยืดหยุ่นพอที่จะพอร์ตได้ตลอดทั้งโครงการ

มองกรอบ CSS

ในที่สุด หากคุณมีแรงบันดาลใจและตั้งใจที่จะใช้อย่างใดอย่างหนึ่งหรือมากกว่าของกรอบ CSS, Heres เป็นรายการที่รวดเร็วของคนที่ได้รับความนิยมไม่กี่ ....

• ระบบกริด 960 : ระบบกริด 960 เป็นความพยายามที่จะปรับปรุงกระบวนการทำงานการพัฒนาเว็บโดยการให้ขนาดที่ใช้กันทั่วไปบนพื้นฐานของความกว้างของ 960 พิกเซล 12, 16 และ 24 คอลัมน์ที่สามารถใช้แยกกันหรือควบคู่มีสามสายพันธุ์คือ ไม่มีอะไรที่คิดว่าคุณไม่สามารถสร้างหนึ่งสำหรับตัวคุณเองได้อย่างง่ายดายพอกรอบให้แม่แบบตารางสำหรับการพิมพ์ในรูปแบบ PDF, ที่หนึ่งสามารถใช้ในการร่าง designs.Bet หน้าเว็บของคุณมันจะทำให้การแสดงผลระดับมืออาชีพถ้าคุณพกแผ่นไม่กี่เมื่อ คุณไปที่ลูกค้าสำหรับ UI รวบรวมความต้องการ นอกจากนี้ยังมีแม่แบบกริดขั้นพื้นฐานสำหรับการออกแบบซอฟต์แวร์ที่นิยมเช่นดอกไม้ไฟ, Flash, InDesign, Illustrator, Photoshop, Visio, ฯลฯ ให้ "เริ่มต้นสำหรับสิบ" เพื่อเริ่มต้นงานออกแบบของคุณ
• พิมพ์เขียว : พิมพ์เขียวให้ไฟล์ CSS จัดชัดเจนสำหรับรีเซ็ต, กริด, รูปแบบ, พิมพ์, Typography, Plugins สำหรับปุ่มแท็บและสไปรต์ ฯลฯ นอกจากนี้ยังให้การสนับสนุนสำหรับ IE เป็นแยก ได้แก่
• SenCSs : แตกต่างจากข้างต้นสอง, SenCSs (เซนส์เด่นชัด) ไม่ได้มีคำจำกัดความ CSS สำหรับ Layout มันจะรวมแบบอักษร paddings ขอบตารางรายการหัว blockquotes ฟอร์มและอื่น ๆ
• BlueTrip : ข้อเรียกร้องเดิมที่สร้างชื่อเสียงเป็นที่มันเป็นชุดของคุณสมบัติที่ดีที่สุดให้โดยกรอบที่คนอื่น ๆ อื่น ๆ เช่นบลูพิมพ์ผลงาน, Oli ... จากที่ที่มันได้รับชื่อ กำหนดคุณสมบัติของมันรวมถึงตาราง 24-คอลัมน์รูปแบบตัวอักษรรูปแบบการออม, การพิมพ์, ปุ่ม ฯลฯ
• ยูอิกริด : มาถึงคุณโดยเครือข่ายนักพัฒนา Yahooo สนับสนุนเค้าโครง (100%) น้ำขนาดกว้างเช่นเดียวกับรูปแบบความกว้างคงที่ตั้งไว้ที่ 750px, 950px, 974px และและความสามารถในการปรับแต่งได้อย่างง่ายดายไปยังหมายเลขใด ที่คุณสามารถดูในทางเทคนิคเป็นเพียงแค่ส่วนประกอบของเค้าโครง ยูอิยังให้ชุด HTML / CSS สำหรับองค์ประกอบของหน้าอื่น ๆ
• YAML (แต่อีกเลย์เอาต์ multicolumn)
• Emastic

จำไว้ว่าใช้กรอบ CSS ไม่ได้หมายความว่าคุณมีความขี้เกียจที่จะสร้างของคุณเอง ... มันหมายถึงว่าคุณเป็นสมาร์ทที่จะเรียนรู้จากประสบการณ์ของผู้อื่นและความผิดพลาดประหยัดเวลาและเพิ่มผลผลิต!

CSS เสร็จดำรงอยู่ 10 ปีในปีนี้! บรรดาผู้ที่ได้รับรอบในขณะที่รายได้ขนมปัง (หรือไม่) ใช้ CSS ของพวกเขาแล้วคุณอาจตระหนักถึงวิธีการที่เราได้รับการอดอาหารเพื่อเลือกที่ดีของแบบอักษร แม้จะมีการขาดนักออกแบบตัวอักษรเช่นเดียวกับที่ที่ การ์เด้น CSS เซน ได้ทำให้การใช้ CSS ภาพพื้นหลังที่จะเปลี่ยนแบบอักษรในการแสวงหาความยุติธรรมในการดำเนินการบางอย่างเพื่อการออกแบบของพวกเขา เราได้พยายามยัง Flash / JavaScript hacks ®เพื่อให้บรรลุเป้าหมายในการออกแบบของเรา โดยไม่นี้เป็นวิธีที่ผิดที่จะได้รับแบบอักษรที่เราต้องการในการออกแบบเว็บของเรา แต่แน่นอนมันไม่ได้เป็นวิธีที่ต้องการมากที่สุด และมากกว่าปีที่ผ่านมานักออกแบบเว็บไซต์เช่นฉันได้อาศัยอย่างเต็มที่ในสิบหรือเพื่อให้แบบอักษรสำหรับการออกแบบของพวกเขา

การพัฒนาล่าสุดในเว็บมาตรฐานและรูปแบบตัวอักษรทำให้มันไปได้ที่จะแสดงข้อความ HTML ใน typefaces อื่นนอกเหนือจากที่เดียวกันแบบอักษรเริ่มต้นเก่า มาใน "@ fontface" decleration CSS

@ fontface provids วิธีการแก้ปัญหาที่จะเชื่อมโยงไปยังแฟ้มตัวอักษรที่เกิดขึ้นจริงและเรียกดูได้จากเว็บ การใช้ fontface @ นักออกแบบสามารถใช้แบบอักษรโดยไม่ต้องตรึงข้อความเป็นภาพพื้นหลัง การดำเนินงานเป็นอย่างมากตรงไปข้างหน้าดังที่แสดงด้านล่าง แต่เป็นทุกสิ่งที่ดีมีส่วน CON ให้มันเบราว์เซอร์ที่ไม่สนับสนุนคนเดียว "ประเภทของตัวอักษร" หากคุณกำลังวางแผนที่จะใช้ fontface @ ในไซต์ที่มีการกำหนดให้การสนับสนุนเบราว์เซอร์ข้ามแล้วคุณจะต้องให้แหล่งที่มาชนิดตัวอักษรต่างๆของเดียวกัน

1. TrueType - รูปแบบการออกแบบให้ดูดีบนหน้าจอ แนะนำอย่างยิ่งสำหรับเบราว์เซอร์ของ Windows (Chrome)
2. OpenType (CFF) - รูปแบบนี้จะดีกว่าสำหรับงานพิมพ์และไม่เคยดูดีบน Windows
3. EOT - คุณต้องรูปแบบนี้ถ้าคุณต้องการที่จะกำหนดเป้าหมายของ Internet Explorer IE จะไม่ใช้รูปแบบอื่น ๆ EOT ของเราจะได้รับการพิจารณา "Lite" ตั้งแต่พวกเขาจะถูกบีบอัดและไม่โดเมนที่ จำกัด
4. SVG - นี่คือรูปแบบ XML ได้รับการสนับสนุนโดยเบราว์เซอร์บางชนิดรวมทั้ง iPhone
5. WOFF - นี้ cross-browser, รูปแบบตัวอักษรบนเว็บอย่างเดียวคือน้ำหนักเบา (ข้อมูลตัวอักษรเป็นซิปที่ถูกบีบอัด) และสามารถรวบรวมกับทั้ง TrueType หรือ PostScript (CFF) สรุป ได้รับการสนับสนุนในขณะนี้โดย Firefox 3.6 +

โดยใช้ @ fontface

  @ font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: ท้องถิ่น ('CalligraphyFLF'), ท้องถิ่น ('CalligraphyFLF') รูปแบบ url ('CalligraphyFLF.woff') ('woff'), url ('CalligraphyFLF.ttf') รูปแบบ ('TrueType'), url ('CalligraphyFLF 'รูปแบบ) (' svg # CalligraphyFLF svg ').
 }
 @ font-face {
   font-family: "แบบอักษรของคุณ";
   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 {font-family: "แบบอักษรของคุณ", จอร์เจีย, serif;} 

ที่คุณสามารถดูจากตัวอย่างข้างต้นจะรวมตัวอักษรแบบอักษรเลือกหนึ่งที่มีการเชื่อมโยงไปยังชุดของ fonttypes สำหรับแบบอักษรเดียวกัน ดังนั้นคนเรียกมันว่า "Kit Font"
มีชุดตัวอักษรที่มีอยู่ที่ชัดเจนให้เชื่อมโยงกับสถานที่ให้บริการ CSS @ font-face ไปได้ภายใต้ข้อตกลงใบอนุญาตของผู้ใช้ (EULA) คือ

แหล่งข้อมูลที่เป็นประโยชน์ WebFont:

• แบบอักษรสำหรับ @ font-face ฝัง หน้า wiki ที่ http://webfonts.info/wiki/index.php?title=Main_Page
  
• เรย์ Larabie . เขาเป็นนักออกแบบตัวอักษรที่มีชื่อเสียงที่ได้ทำหลายร้อยแบบอักษร TrueType ที่น่าสนใจได้อย่างอิสระสำหรับการใช้บนเว็บ แบบอักษรของเขาเป็นอย่างหรูหราตกแต่งและขี้เล่น
• Dieter Steffmann เป็นผู้ออกแบบแบบอักษรอื่นที่ดี เขาก็มีแบบอักษรที่สวยงามหลายใช้ได้สำหรับทุกคนใช้
• ร้านค้าแบบอักษร : แบบอักษรที่มีการออกแบบเฉพาะสำหรับการใช้งานเว็บ มากกว่า 30 ที่ประสบความสำเร็จมากที่สุดครอบครัว FontFont ตอนนี้ใช้ได้เป็น FontFonts เว็บ FontShop นอกจากนี้ยังมีผู้ใช้ WebFont รายละเอียดคู่มือ http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• กระรอกตัวอักษร : การแสดงผลงานแบบอักษรทั้งหมดที่กระรอกตัวอักษรสำหรับการใช้งานกับ @ font-face ฝัง CSS กระรอกตัวอักษรมีปริมาณที่น่าประทับใจของประเภทของการทำให้ตายง่ายที่จะเลือกหนึ่งที่ออกและเสนอคล่องแคล่ว "ชุด" - แบบอักษรที่คุณเลือกในหลายรูปแบบพร้อมกับการสาธิต HTML & CSS ที่ใช้ในปัจจุบันมาก @ ไวยากรณ์ font-face . พวกเขายังมีวิธีที่จะ ทำให้ตัวเองของคุณ @ ชุด font-face . ถ้าแบบอักษรที่คุณต้องการใช้ที่ได้รับการอนุญาตอย่างเหมาะสม (คนที่มากับคอมพิวเตอร์ของคุณจะไม่ถูกต้อง), เครื่องกำเนิดไฟฟ้าผลิต EOT, SVG, และ Hey! ไฟล์ WOFF

มีทักษะชุดของฉันที่ จำกัด ด้วยเครื่องมือเช่น Photoshop และ Illustrator, I สุจริตสามารถสารภาพว่าฉันเป็นนักพัฒนาที่ดีกว่าผมออกแบบ แต่พื้นหลังที่มีแกน (ฝั่งเซิร์ฟเวอร์) การพัฒนาด้วย Java / PHP / COBOL, ของฉันได้รับอิทธิพลในเชิงบวกมากเกี่ยวกับการพัฒนาทักษะ UI ของฉัน สิ่งที่ฉันหมายถึงคือในขณะที่การสร้างการออกแบบของฉันคือเมื่อใดก็ตามที่ฉันทำออกแบบผมคิดเกี่ยวกับวิธีการออกแบบสามารถแปลงที่ดีที่สุดลงใน HTML-CSS และในขณะที่ทำแบบ HTML CSS, ฉันให้คิดเกี่ยวกับเทคโนโลยีแบ็กเอนด์และให้แน่ใจว่ามีเหตุผล ที่ HTML สามารถดำเนินการได้อย่างง่ายดายใน XSL loops หรือ PHP ตัวอย่างเป็นต้น

กว่าปีที่ผ่านมาฉันได้รับการโยนหัวเพื่อการออกแบบโดยนักออกแบบ UI ที่อาจ donot มีเงื่อนงำอะไร HTML หรือ CSS คือ ปีที่ผ่านมาทั้งหมดเหล่านี้ผมได้คิดว่าผมจะขอมากเกินไปถ้าฉันเพียงแค่คาดหวังว่านักออกแบบที่พยายามที่จะ shov "เป็นไปไม่ได้รหัส" เขาออกแบบลงไปในคอของฉันที่จะเข้าใจเพียงเล็กน้อยสิ่งที่ออกแบบของเขาจะถูกแปลง เข้าไป ที่จะช่วยใช่ไหม?

แล้วฉันมาข้ามบทความนี้วันนี้ ... นักออกแบบเว็บไซต์ที่สามารถเขียนโค้ด ... พระเจ้าขอบคุณ ฉันแค่หนึ่งในหลายคนที่รู้สึกเหมือนกัน ... artitle ข้างต้นเป็นบิตยาวยืด .. แต่มูลค่าอ่านคำของมันทุก

ขอบคุณเจย์เอลเลียตหุ้น ... ฉันรู้สึกโล่งใจ!

ข้อความที่ตัดตอนมาที่นี่เป็นบางส่วนจาก บทความ Elliots .

ว้าว, ว่าวัน! มันเริ่มต้นด้วย tweet น้อยหนึ่งและจบลงด้วยการสนทนาที่ดูเหมือนจะกวาดไปทั่วชุมชนการออกแบบเว็บทั้งหมด ปรากฏว่ามีบางความคิดเห็นที่แข็งแกร่งมากขึ้นในเรื่องของการไม่ว่าจะเป็นนักออกแบบเว็บควรจะสามารถใช้รหัส
...
ดังนั้นก่อนที่เราจะเข้าไปในนี้ให้ผมได้อย่างรวดเร็วปะยางรถสิ่งที่ผมพูดในเช้าวันนี้บน Twitter:

สุจริตฉันตกใจว่าในปี 2010 ฉันยังคงมาใน 'นักออกแบบเว็บ' ที่ไม่สามารถรหัสออกแบบของตัวเอง แก้ตัวไม่มี

ฉันควรจะ ... เคยน้อยเฉพาะเจาะจงมากขึ้นใน tweet ของฉัน ฉันถูกพูดถึงนักออกแบบที่ไม่ได้มีแม้แต่พื้นฐานที่สุดของ HTM​​L CSS และทักษะที่จะทำให้การออกแบบแบนลงในเว็บไซต์จริง คนที่จงใจไม่เลือกที่จะไม่ให้รหัส; ผู้ที่ไม่สามารถ และฉันยังหมายถึงเฉพาะกับรหัส front-end ที่นี่; แน่นอนมันไร้สาระที่จะคิดว่านักออกแบบที่ควรจะเป็นโปรแกรมเมอร์ back-end ที่น่าตื่นตาตื่นใจ ...

เราได้รับการออกแบบเว็บ 'ส่งใน Illustrator, 300dpi, โค้ดไม่สามารถที่จะสอดคล้องไม่มี / การใช้งาน
~ Mahon เอมี่

มันรับสายและผมได้มีการตัดขึ้นนี้อย่างใด ฉันรู้ว่าจะมีหลายคนที่ไม่เห็นด้วยกับฉันและความตั้งใจของฉันไม่ได้ไปรุกรานหรืออารมณ์เสียทุกคนที่ไม่สามารถรหัส แต่ผมหวังว่าบางส่วนของสิ่งที่ผมเคยกล่าวสะท้อนให้เห็นถึงบางจุดที่มักเกิดขึ้นเมื่อ delving เป็น การอภิปรายนี้

ณ สิ้นวันที่ฉันจะไม่สูญเสียการนอนหลับใด ๆ มากกว่าที่สามารถรหัสและผู้ที่ไม่สามารถ ฉันแค่แท้จริงประหลาดใจที่พบนักออกแบบจำนวนมากที่ขาดทักษะ Front-end ที่ผมคิดว่านี้คือสิ่งที่ผ่านมา

ยังอ่านความคิดเห็นมีความเห็นรอบ 320 คนขณะที่ผมเขียน ... พวกเขาที่มีมูลค่าอ่าน
โปรดอ่าน Elliots โพสต์เต็มรูปแบบที่นี่ .. นักออกแบบเว็บไซต์ที่ไม่สามารถรหัส

ตั้งแต่ปุ่มและข้อความเป็นอินไลน์เพื่อให้ข้อความที่จะจัดตำแหน่งตัวเองไปยังด้านล่างของปุ่ม, ข้อความจะปรากฏเป็นเล็กน้อยภายใต้ปุ่ม
หากคุณต้องการเหล่านี้เพื่อจัดแนวไปด้านบนคุณจะต้องวางวิทยุและข้อความลงในภาชนะบรรจุที่แยกต่างหากเช่น divs หรือการขยายขอบเขต (ตามความเหมาะสม) และพวกเขาจะดูแลการจัดตำแหน่ง มันจะง่ายต่อการใช้เซลล์ตารางเกินไปจากการขออนุญาตสั้นการออกแบบของคุณมัน

นี้ไม่ได้จะมีลักษณะเดียวกันในเบราว์เซอร์ทุกขณะที่เบราว์เซอร์จะแสดงทุกวิทยุแตกต่างกันเล็กน้อยจึงมีเสมอไปเป็นปัญหาขนาดไม่ว่าสิ่งที่คุณทำไม่มี

HTML5 ยังคงเป็นร่าง ขณะที่ผมเขียนงานเกี่ยวกับ HTML 5 ซึ่งเริ่มในปี 2004 ยังคงถูกกำหนดโดยความพยายามรูปร่างร่วมทุนระหว่าง W3C HTML WG และ WHATWG . คำว่า Next Gen HTML จะมีการปรับปรุงและคุณสมบัติซึ่งโครงสร้างใหม่และความหมายตัวควบคุมฟอร์มการ APIs, แท็กมัลติมีเดีย ฯลฯ จะ

ในภาษาอังกฤษที่ง่าย ... สิ่งที่มันจะหมายถึงให้เราพัฒนา UI ...

• นอกจากนี้มีบางส่วน ได้แก่ แท็กที่มีโครงสร้างจะ <article>, <section>, <header>, <aside>, <nav> และที่จะเข้ามาแทนที่ส่วนใหญ่ของ <div> ของใช้บนหน้าเว็บทำให้หน้าเว็บของคุณบิตของความหมายมากขึ้น แต่ที่สำคัญกว่าได้ง่ายขึ้น ในการอ่าน
  เฮ้! แค่คิดความพยายามที่บันทึกไว้ในการหาที่หนึ่งแท็ก div ที่ขาดหายไปอย่างใกล้ชิด
  ยกตัวอย่างเช่น

  <body>
   <header> ... <หัว />
   <nav> ... <NAV />
   <article>
     <section>
       ...
     <ส่วน />
   </ article>
   <aside> ... </ นอกเหนือ>
   <footer> ... </ ท้าย>
 </ body> 

แทน

  <body>
   <div id="header"> ... </ div>
   <div id="nav"> ... </ div>
   class="article"> <div
     class="section"> <div
       ...
     </ div>
   </ div>
   <div id="aside"> ... </ div>
   <div id="footer"> ... </ div>
 </ body> 

• กับการถือกำเนิดของเนื้อหาเสียงและวิดีโอเช่น YouTube, การใช้มัลติมีเดียที่ฝังตัวอยู่บนหน้าเว็บได้ increaded โดยพับ Taking นี้ในบัญชีตอนนี้แผนคือการเพิ่มการสนับสนุนพื้นเมืองสำหรับการฝังวิดีโอและเสียงลงในเบราว์เซอร์ของตัวเองจึงให้ผู้ใช้สามารถเล่นพักหยุดแสวงหาและปรับระดับเสียงใช้ builtin DOM APIs สำหรับสคริปต์เพื่อควบคุมการเล่น

ยกตัวอย่างเช่น

  poster="poster.jpg"> <video
     แหล่งที่มา <src = พิมพ์ "video.3gp" = "video/3gpp"
     สื่อ = "มือถือ">
         <source src="video.mp4" type="video/mp4">
 </ video>
 <audio>
   <source src="music.oga" type="audio/ogg">
   <source src="music.mp3" type="audio/mpeg">
 <เสียง /> 

• ดีกว่าที่กำหนดบทบาทของความหมายสำหรับองค์ประกอบที่มีอยู่สำหรับเช่น <strong> และอาจ <em> ตอนนี้จริงมีความหมายที่แตกต่างกันคือพวกเขาจะทำงานแตกต่างกัน

มีการเปลี่ยนแปลงอื่น ๆ อีกมากมาย / อัพเกรดเป็นเวอร์ชั่นที่ใหม่กว่าคือ ... จะให้การปรับปรุงการโพสต์นี้ที่ผมมาค่อนข้างสมเหตุสมผลใด ๆ ที่มีประโยชน์ที่น่าสนใจคน .... ดูพื้นที่นี้

เอกสารนี้ไม่อาจให้ข้อมูลที่ถูกต้องเป็น HTML 5 สเปคยังคงเป็นอย่างแข็งขันในการพัฒนา เมื่อสงสัยควรตรวจสอบ HTML 5 สเปคที่นี่ .

เวลาซ้ำแล้วซ้ำอีกเมื่อทุกเบราว์เซอร์อื่น ๆ ได้เห็นการทำงานเป็นไปตามที่บอกกฎ W3C, spirals IE คุณออกมาจากจิตวิญญาณการพัฒนาโดยการขว้างปาโกรธเคืองที่ไม่ได้ดูเหมือนจะมีการแก้ไข เพียงอย่างใดอย่างหนึ่งดังกล่าวเป็นปัญหาใน IE7 นี้

คำชี้แจงปัญหา:
ฉันและอื่น ๆ อาจจะหลาย ๆ นักพัฒนาเว็บที่ร้ายแรงได้สังเกตเห็นมากกว่าหลายครั้งที่เมื่อมีการซ้อนกันในรูปแบบที่ช่วยลอยตัวติดบนโฉบกว่าการเชื่อมโยงบางอย่าง (แท็กสมอ), ภาชนะที่มีดูเหมือนว่าจะเปลี่ยนไม่กี่พิกเซลไปทางขวา . ฉันได้พยายามแก้ปัญหาของ Google สำหรับปัญหานี้ แต่ได้พบแทบจะไม่ได้คำตอบที่เหมาะสมไปทำไมและเมื่อมันเกิดขึ้น (ที่อาจช่วยป้องกันปัญหาเหล​​่านี้เกิดขึ้น) ดังนั้นฉันไม่เคยพบวิธีการแก้ปัญหาที่ชัดเจนในการแก้ปัญหาอย่างใดอย่างหนึ่ง ...

ทางออกที่เป็นไป:
จากประสบการณ์ผมมีแจ้งให้ทราบล่วงหน้าร้อยละ 90% เท่านั่นคือว่าปัญหานี้ได้รับการแก้ไขโดยการเพิ่มคุณสมบัติซูมในความหมายของ CSS ภาชนะผิดพลาดพฤติกรรม ...

 somediv # {
       ซูม: 1;
 }

อีกครั้งด้วยเหตุผลที่คลุมเครือ ... ลองนี้ ...
องค์ประกอบบางอย่างใน IE ได้ "hasLayout" สถานที่ให้บริการซึ่งเป็น "ความจริง" โดยค่าเริ่มต้น หลายพฤติกรรม CSS ภาพ; ตัวอย่างอัลฟากรองใช้งานได้เฉพาะในองค์ประกอบที่ hasLayout และ {ซูม: 1} ดูเหมือนว่าจะให้องค์ประกอบเป้าหมายสถานที่ให้บริการ hasLayout .... มีประโยชน์หรือไม่ I dont คิดดังนั้น ...

สถานที่ให้บริการซูมเข้ายังดูเหมือนว่าจะได้รับการสนับสนุนโดยโครเมี่ยม แต่อาศัยการใช้งานดูเหมือนจะทำให้ผลกระทบมากในรูปแบบของฉัน ... ลองถ้ามันเหมาะกับคุณ ... ถ้าไม่ได้ที่คั่นหน้านี้ภายใต้ "craps CSS"

• ประกาศประเภทเอกสารที่ต้องการจะนำเสนอในตอนต้นของเอกสารที่ใช้ไวยากรณ์ HTML มันอาจจะเลือกที่จะใช้ภายในไวยากรณ์ XHTML แต่ก็ไม่จำเป็นต้องใช้ เอกสาร XHTML ไม่จำเป็นต้องรวม DOCTYPE เพราะเอกสาร XHTML ที่มีการจัดส่งอย่างถูกต้องโดยใช้ชนิด MIME XML และมีการประมวลผลเป็น XML โดยเบราว์เซอร์จะแสดงผลเสมอในการที่ไม่มีโหมด quirks

• ใน XHTML, ชื่อแท็กเป็นกรณีที่สำคัญและมักจะถูกกำหนดที่จะเขียนด้วยตัวพิมพ์เล็ก ใน HTML แต่ชื่อแท็กเป็นกรณีตายและอาจจะเขียนในกรณีที่เป็นตัวพิมพ์ใหญ่ทั้งหมดหรือผสมแม้จะประชุมร่วมกันมากที่สุดคือการติดกับตัวพิมพ์เล็ก กรณีที่แท็กเริ่มต้นและสิ้นสุดไม่จำเป็นต้องเป็นเหมือนกัน แต่เป็นที่สอดคล้องกันจะทำให้การทำความสะอาดดูรหัส

ประโยชน์ของการใช้ HTML

• หลังร่วมกับเบราว์เซอร์ที่มีอยู่
• ผู้เขียนคุ้นเคยกับไวยากรณ์
• ไวยากรณ์ผ่อนปรนและให้อภัยหมายความว่าจะไม่มีผู้ใช้ที่เป็นมิตร " จอเหลืองของตาย "ถ้าความผิดพลาดโดยไม่ตั้งใจบิลผ่าน
• ไวยากรณ์ชวเลขสะดวกเช่นผู้เขียนสามารถละเว้นแท็กบางและค่าแอตทริบิวต์

ประโยชน์ของการใช้ XHTML

• ไวยากรณ์ XML เข้มงวดส่งเสริมให้ผู้เขียนไปเขียนมาร์กอัป well-formed ซึ่งมีผู้เขียนบางคนอาจพบว่าง่ายต่อการรักษา
• รวมโดยตรงกับคำศัพท์ XML อื่น ๆ เช่น SVG และ MathML
• ช่วยให้การใช้การประมวลผลของ XML ซึ่งบางคนเขียนใช้เป็นส่วนหนึ่งของการแก้ไขและ / หรือกระบวนการเผยแพร่