CSS เด็ดๆ

[NooK]

 

[มังกร]

โอ้ ความรู้มากมาย

เรื่องการวัดกำลังและผลประโยชน์กลับมาอีกแล้ว
จะชนะได้คงต้องอาศัยว่าใครสร้างภาพได้ดีกว่ากัน
ใครจะสร้างภาพให้ คนทำเว็บ จำนวนมากเชื่อถือได้

คนที่แพ้ก็คือคนที่จะถูกด่าเป็นรายต่อไป..

เอ๊ะ อีนี่ประชดอีกแล้ว
แสดงว่ายังไม่เคลียร์กระจู๋นู้นใช่ไหมเนี่ย
ขี้เกียจเล่นด้วยแล้ว เพราะเคลียร์จนไม่รู้จะเคลียร์ยังไงละ ค่อยๆ ปรับทัศนคติเอาละกัน


คือยังงี้ครับ
บทความที่อ่านมาเนี่ยสงสัยว่าจะมาจาก thaicss มั้ง
ซึ่งที่นั่นเขามีแวะๆ พูดถึงเรื่องสองมาตรฐานนี้เหมือนกัน
อย่างเรื่องนี้ HTML5 เป็นสิ่งที่ผมต้องให้ความสนใจแล้วหรือยัง

อันนี้เขาบอกว่าทาง W3C เองก็หันมามอง HTML5 แล้ว
ว่าเออ มันก็ดีนี่หว่า แต่มันต้องไปคนละทางกันนะ (ถ้ามองในประเด็นของกระจู๋นี้ เราๆ ก็จะเชียร์ html5 มากกว่า)



XHTML2 และ HTML5 ทางเลือกที่ต้องเดิน
HTML5 XHTML2 และ อนาคตของเวป (1)
HTML5 XHTML2 และ อนาคตของเวป (2)
HTML5 XHTML2 และ อนาคตของเวป (3)


HTML5 กับ CSS3 อนาคตที่จะมาบรรจบกัน ตอนที่ 1


บทความขนาดยาวชุดนี้แนะนำให้อ่านครับ
เพราะมันไม่ใช่เรื่องไกลตัวของเราๆ กันเลยนะ

ตูว่าในที่สุดแล้ว

คีย์เวิร์ดของเรื่องนี้คือ Backward Compatible แฮะ
และตูกลับมองว่า css3 จะทำงานได้ดีกับ xhtml มากกว่า แสดงผลได้ถูกต้องมากกว่า
และมีประสิทธิภาพมากกว่าด้วย (ลองนึกถึงอุปกรณ์ mobile ที่มีทรัพยากรจำกัด)
ในขณะที่ HTML 5 จะต้องอาศัยความสามารถของบราว์เซอร์ด้วยในการแสดงผล

ถามใจตูนะ ตูชอบโครงสร้างเคลียร์ๆ แบบ xhtml 1.1 นะ
เพราะปัจจุบัน ตูมีเว็บนึงที่กำลังจะรื้ออยู่
มี static page แถมใช้ Table ทำเลยเอ้าท์ มากกว่า พันหน้า  
และแต่ละหน้า โึค้ด HTML ก็เละตุ้มเป๊ะไปหมด
บางหน้ามี โึค้ดจาวาสคริปต์ ที่ไม่ได้ใช้แปะไว้ด้วย  

นึกถึง xhtml ขึ้นมาจับใจเลยครับ  

[มังกร]

พี่ณตเจ๋งอ่ะ 





(อ่านไม่รู้เรื่องหรอก เพราะไม่เคยใช้ HTML 5)

[มังกร]

เฮ้ย เคลียร์แล้วนะ
เคลียร์จริงๆ(มั้ง)

ตามนี้
ก็เข้าใจว่าอะไรมันไม่มาตรฐาน
ชอบสร้างมาตรฐานตัวเองที่ไม่เข้ากับคนอื่นเนี่ย
มันไม่ดีใช่มะ

แต่ทุกวันนี้เราก็ยังไม่รู้ใช่ป่ะ ว่าอะไรมันคือมาตรฐานกันแน่
ระหว่าง XHTML กับ HTML5
ไม่มีใครรู้เลย และต้องเลือกตามความชอบตัวเอง...
จนกว่าจะมีฝ่ายไหนแพ้ไป(หรือรวมกันได้)
อย่างตอน DVD+ กับ DVD- เนี่ย คือตัวอย่างของการรวมกัน
อย่างตอน HD DVD กับ Blue ray เนี่ย คือตัวอย่างของการแพ้แล้ว กลายเป็นว่าต้อง fade หายไป
คนที่ลงทุนกับ HD DVD ก็คงเซ็งเหมือนกันแหละ ที่ของตัวเองอยู่ๆ ก็จะไม่มาตรฐานซะงั้น

จากที่อ่านมา XHTML ดูมาตรฐานกว่าเห็นๆ ยืดหยุ่น ดูง่าย
แต่ถ้ามัน พัฒนาช้า อืดอาด ลูกเล่นน้อย
ทั้ง google chrome firefox safari opera ก็คงต้องทำให้ตัวเองรับ HTML5 ได้ไปก่อน(ถึงแม้จะไม่ถูก "มาตรฐาน" )
ในอนาคตทางที่ดูที่สุดคือ ทำให้มันใช้ได้ด้วยกัน
แต่ถ้าทำให้รวมไม่ได้ ก็อยู่ที่ว่า W3C จะทำให้ XHTML พัฒนาขึ้นมาได้เร็วทันใจ ค่ายต่างๆ ได้แค่ไหน

[มังกร]

และนั่นแหละที่เป็นประโยชน์กับผู้บริโภคอย่างเราๆ ทั้งหลาย

ในนามของตลาดการค้าเสรี

ขอบคุณสำหรับ ความรู้ครับ

เจ๋งโคตร  ส่วนตัวก็ได้แต่ลองผิดลองถูกเท่านั้นแหละ เขียนไม่เป็นกะเค้าซะที
ความรู้เยอะมากๆเลยค่ะ

http://muddledramblings.com/table-of-css3-border-radius-compliance
ตารางเปรียบเทียบการแสดงผล "ขอบมน" (CSS3) ในแต่ละเบราว์เซอร์

[มังกร]

ลองเปิดกับ IE6

คอลัมน์ขวาสุดเหมือนกันทุกรูปเลย 

8 different ways to beautifully style your lists
http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html

ใช้ ol ul li ทำลิสต์ได้แปดแบบ อันสุดท้ายเจ๋งมาก(css3)

ขอบคุณครับ

อ่านมาตั้งนาน มึนๆ ครับ ลองๆเล่นไปมา แต่มีปัญหากับ IE อีกแล้ว
ตรงลูกศรชี้ไม่รู้มันมายังไง ช่วยหน่อยคัรบ

บน IE


บน Firefox

โค้ด:

* {
margin: 0px;
}
html,body {height:100%;}
body {
text-align: center;
margin: 0px;
padding: 0px;
background-color: #FFF;
font-family: Tahoma;
}
#wrapper {
width: 820px;
margin: 0px auto;
height: 100%;
}
#header {
margin-top: 20px;
margin-bottom: 20px;
}
#nav {
background-image: url(../flora/images/nav.jpg);
background-repeat: repeat-x;
position: relative;
height: 20px;
}
#nav a {
text-decoration: none;
font-size: 13px;
color: #FFF;
margin-left: 30px;
margin-right: 30px;
font-weight: normal;
}
#footer {
width: 820px;
}
#banner {
margin:0;
height: 300px;
width: 820px;
vertical-align: baseline;
position: relative;
}
#banner .banner_left {
width: 100px;
height: 300px;
float: left;
}
#banner .banner_right {
height: 300px;
width: 720px;
float: left;
}
#content {
background-color: #c79ebe;
vertical-align: baseline;
position: relative;
}

เวลาแสดงผล

โค้ด:

<body>
<div id="wrapper">
    <div id="header"><img src="../flora/images/logo.jpg" /></div>
        <div id="nav">
        <a href="main.html">HOME</a>
<a href="room.html">ROOMS & RATE</a>
<a href="services.html">OUR SERVICES</a>
<a href="gallery.html">GALLERY</a>
<a href="location.html">LOCATION</a>
<a href="reservation.html">RESERVATION</a>        </div>
        <div id="banner">
          <div>
        <div class="banner_left">
            banner left            </div>
            <div class="banner_right">
              <embed id="viewer" height="300" width="720" flashvars="xmlDataPath=/rasananda/flash/spa.xml" wmode="transparent" quality="high" bgcolor="#ffffff" name="viewer" style="" src="/new_flora/flash.swf" type="application/x-shockwave-flash"/>            </div>
            </div>
        </div>
      <div id="content">content</div>
      <div id="footer">footer</div>
     </div>
   
</body>

ไม่รู้แฮะครับ (ไม่สะดวกทดสอบโค้ด)
ลองลบ Space ว่างๆ หลังแท็ก </embed> ดูว่าหายไหม
หรือไม่ก็ใส่ vspace="0" ลงไปในแท็ก <embed> ดูก่อน