มี ที่ นี่

พล ส้ม's Blog

Posts Tagged ‘css’

ทำไมต้องทำเว็บด้วย CSS

No Comments »

July 14th, 2009 Posted 9:53 am

ไม่รู้ว่ามีใครที่สงสัยบ้างหรือเปล่า ว่าทำไมต้องเขียน CSS กับเว็บ ทั้งๆ ที่การเขียนเว็บปกติก็สามารถที่จะใส่สี ใส่ข้อมูลรายละเอียดลงไปได้เหมือนๆกันกับการเขียนแบบธรรมดา

  • การใช้ CSS เป็น การแก้ปัญหาอะไรเกี่ยวกับการเขียนเว็บ ?
  • การใช้ CSS เป็นการลดระยะเวลาการเขียนหรือเพิ่มการเขียน ?
  • การใช้  CSS เป็นความนิยมสมัยหนึ่งของเว็บหรือไม่?

หลากหลายปัญหาพวกนี้ ความจริงแล้วหาได้เยอะแยะไปหมด ต้องลองทำเองก็จะรู้ ว่ามันเป็นอะไรทำไมต้องใช้

จากที่เกริ่นมา ถ้าเป็นคนที่มีคำถามพวกนี้ในหัว แสดงว่ายังไม่เคยเขียนระบบที่มันทำงานหลายหน้าหน่อย ยิ่งเป็นระบบใหญ่ๆ ยิ่งมีปัญหาเยอะแยะไปหมด

CSS เองจะช่วยเราได้ระดับหนึ่งในการจัดหน้า และการแสดงผลของเว็บ เราไม่จำเป็นต้องจัดแบบ inline ทุกบรรทัด และทำให้ code ของ HTML นั้นออกมาไม่รกและขนาดเ็กด้วย

คนที่ใช้ Css อยู่เป็นประจำ จะคิดก่อนว่า จะต้องวาง layout ยังไงบ้าง ทำให้คิดได้เป็นระบบมากขึ้นด้วย

Tags:
Posted in เรื่องทั่วไป

ui jquery tab

1 Comment »

January 29th, 2009 Posted 5:23 pm

ในการเขียน tab ด้วย jquery นั้นเราทำได้โดยง่าย แต่การแสดงผลนั้นก็เป็นสิ่งที่เราต้องทำ ดังนั้นเราก็ต้องรู้ด้วยว่าการที่ คลิกแต่ละที่นั้น jquery ได้เปลี่ยน a และ span แต่ละตัวไปเป็น css ตัวใหนแล้ว

โดยปกติแล้ว state css จะอยู่ใน /ui.tabs.js เราสามารถเปลี่ยนได้ว่าต้องการให้เป็น class อะไร

hideClass: 'ui-tabs-hide',
idPrefix: 'ui-tabs-',
loadingClass: 'ui-tabs-loading',
navClass: 'ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all',
tabClass: 'ui-state-default ui-corner-top',
panelClass: 'ui-tabs-panel ui-widget-content ui-corner-bottom',

เวลาเปลี่ยนไปแล้วก็อย่าลืมเปลี่ยน  style ใน css ตามด้วยละ เด่วจะเพี้ยนกันหมด

Tags: , ,
Posted in web 2.0

CSS Hack

No Comments »

January 23rd, 2009 Posted 5:11 pm

พอดีได้ไปอ่านเจอในเวบ http://gucom48.net46.net/  อ่านแล้วเก็ทเลย ก็เลยขอเอามาเก็บกันลืม ละกันนะ ^^

CSS hacks
การที่เราจะเขียนเว็บไซต์ที่ใช้ style sheet โดยเฉพาะแบบ tablelessให้ cross browser
มาสักเว็บนึง เป็นเรื่องที่ยากลำบาก เพราะ web brower รุ่นเก่า มาตรฐานการ render จะต่าง
จาก web browser รุ่นใหม่ แม้กระทั่งยี่ห้อเดียวกัน แต่ต่างรุ่น ก็แสดงผลต่างกัน เช่น IE6 กับ
IE7 ที่แสดงผลบางอย่าง ไม่เหมือนกัน ดังนั้น เพื่อให้บรรลุวัตถุประสงค์(ทำเว็บ cross browser)
เราก็ต้องอาศัย การ hack css เข้าช่วย

CSS hacks คืออะไร?

คือการใช้ bug ของ browser ช่วยในการสร้างเงื่อนไขการทำงานของ style sheet
เพราะบาง browser จะมี bug โดยเฉพาะ IE เช่น คำสั่ง a สามารถใช้กับ IE ได้(เป็น bug ของ IE)
แต่ใช้กับ browser อื่นไม่ได้ เราก็ใช้คำสั่ง a เป็นเงื่อนไขในการสั่งให้ style sheet ทำงาน
ทำให้เราสามารถใช้ 2 คำสั่งที่เหมือนกันได้ แต่ต่างกันตรงที่ ค่าที่ระบุให้คำสั่งนั้นต่างกัน

Important Hack

  1. p { color: #ff0000; }
  2. p { color: #000000; }

ตามปกติแล้ว css จะถูกอ่านตามลำดับ ถึงแม้ว่าจะเป็นคำสั่งที่เหมือนกัน แต่คำสั่งสุดท้ายเท่านั้นที่
ถูกใช้งาน ดังตัวอย่างข้างต้นสีตัวอักษรจะเป็นสี #000000 เท่านั้น สี #ff0000 จะไม่มีผล

แต่ถ้าเราใช้คำสั่ง !important

  1. p { color: #ff0000 !important; }
  2. p { color: #000000; }

ไม่ว่าคำสั่ง color: #ff0000 !important; จะอยู่ส่วนไหนของเอกสาร(ลำดับการเขียนไม่เป็นผล)
คำสั่งนี้เท่านั้นที่จะถูกทำงาน

แต่คำสั่งนี้ใช้ได้กับ ie6

  1. #maincontent {
  2. min-height: 300px;
  3. height: auto !important; /* For Saf/Fx */
  4. height: 300px; /* IE6 expands this if needed */
  5. }

จากตัวอย่าง ie6 จะใช้คำสั่ง height: 300px; ได้เท่านั้น ส่วน browser อื่นก็ใช้คำสั่ง
height: auto !important; (ลำดับไม่สำคัญเพราะมี !important)

Underscore Hack

เนื่องจาก CSS specification ได้สงวนการขึ้นต้นคำสั่ง(property)ด้วย ขีดล่าง(_) or ขีดกลาง(-)
ไว้ใช้กับ vendor-specific property name จึงทำให้คำสั่งที่ขึ้นต้นด้วย _,- ไม่ถูกอ่านจาก
browser สมัยใหม่ ยกเว้น ie6 เท่านั้น ที่ยังอ่านคำสั่งนี้ได้อยู่

  1. p{
  2. color: black;
  3. _color: blue;
  4. }

จากตัวอย่าง ie6 จะอ่านทั้งสองคำสั่ง แต่จะสั่งให้ทำงานได้เฉพาะคำสั่งสุดท้าย (วิธีนี้ลำดับการเขียน
มีความสำคัญ) แต่ browser อื่นอ่านคำสั่งแรกเท่านั้น

Backslash Hack

วิธีนี้คือการใส่ \ เข้าไปในชื่อ property ส่งผลให้ browser อื่นละเว้นคำสั่งนี้ แต่ยังคงมีผลกับ ie
(ผมไม่แน่ใจว่ามีผลกับ ie7 หรือป่าว เพราะยังไม่ได้ลอง : P )

  1. .test {
  2. height: 500px;
  3. he\ight: 400px;
  4. }

จากตัวอย่าง ie ใช้คำสั่ง he\ight: 400px; ส่วน browser อื่น ๆ จะใช้ height: 500px;

note: backslash ไม่ควรใส่นำหน้าตัวอักษร a-f, A-F และ 0-9 เพราะอาจจะถูกตีค่าว่าเป็น
เลขฐาน 16

Star-HTML Hack

ดอกจัน (*) คือ Universal Selector

  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }

จากตัวอย่าง ทุก element ในเอกสารจะถูกควบคุมด้วยคำสั่งที่อยู่ในปีกกาของ *

การใช้ Universal Selector จะเห็นผลได้มีอยู่สองกรณีคือ

  • ใช้ * อย่างเดียว ดังตัวอย่างข้างต้น
  • ใช้ * ร่วมกับ simple selector

note: simple selector คือ การเขียน selector ที่ขึ้นต้นด้วย element แล้วตามด้วย
Universal Selector หรือ attribute selectors หรือ ID selectors หรือ pseudo-classes

  1. * em{
  2. ⋮ declarations
  3. }
  1. <body>
  2. <div>
  3. <h1>The <em>Universal</em> Selector</h1>
  4. <p>We must <em>emphasize</em> the following:</p>
  5. <ul>
  6. <li>It’s <em>not</em> a wildcard.</li>
  7. <li>It matches elements regardless of <em>type</em>.</li>
  8. </ul>
  9. This is an <em>immediate</em> child of the division.
  10. </div>
  11. </body>

การใช้ * em จะมีผลกับ

  • “Universal” ใน h1เพราะ * ตรงกับ <h1>
  • “emphasize” ใน p เพราะ * ตรงกับ <p>
  • “not” ใน li ตัวแรก เพราะ * ตรงกับ <ul> หรือ <li>
  • “type” ใน li ตัวที่สอง เพราะ * ตรงกับ <ul> หรือ <li>

แต่ถ้าหากใช้ universal selector ไม่ได้ตามด้วย simple selector การใช้ universal selector
จะไม่เป็นผล พูดง่าย ๆ ก็คือ ใช้ก็เหมือน ไม่ใช้ ดังตัวอย่างข้างล่างนี้

  1. *.warning {
  2. ⋮ declarations
  3. }
  4. .warning {
  5. ⋮ declarations
  6. }

ทั้งสอง ไม่ต่างกันเลย

มาเข้าเรื่องกัน ถ้าเราใช้ Universal Selector ร่วมกับ html เป็น * html จะเกิดอะไรขึ้น

  1. .test {
  2. position: fixed;
  3. }
  4. * html .test{
  5. position: absolute;
  6. }

คำสั่งที่เป็นของ(อยู่ภายในวงเล็บปีกกา) * html จะถูกใช้งานก็ต่อเมื่อ html ถูกสืบทอดมาจาก
element ใด ๆ แต่มันเป็นไปไม่ได้ที่ html จะสืบทอดมาจาก element อื่น เพราะ html เป็น root
ดังนั้น browser ส่วนใหญ่จึงมองข้ามกลุ่มคำสั่งนี้และไม่ประมวลผล แต่ ie6 และต่ำกว่า ie6
จะยังอ่านค่าพวกนี้อยู่ เลยเกิดเป็น bug ของ ie6

ตารางแสดง browser ที่ bug * html
ที่มาตาราง: http://reference.sitepoint.com/css/universalselector

Easy selectors hack

ใช้ได้กับ IE7 เท่านั้น

  1. *:first-child+html {
  2. ⋮ declarations
  3. }

ใช้ได้กับ IE7 และต่ำกว่า

  1. *:first-child+html {} * html {
  2. ⋮ declarations
  3. }

ใช้ได้กับ IE7 และ browser รุ่นใหม่ อื่น ๆ

  1. html>body {
  2. ⋮ declarations
  3. }

ใช้ได้กับ browser รุ่นใหม่ แต่ไม่รวมถึง IE7

  1. html>/**/body {
  2. ⋮ declarations
  3. }

สรุป

ลำดับ CSS hacks IE6 IE7 Firefox Safari
1. !important /
2. _property หรือ -property /
3. * html /
4. *:first-child+html {} /
5. *:first-child+html {} * html {} / /
6. html>body {} / / /
7. html>/**/body {} / /

ตารางแสดง bug หรือการ hack ของ browser ที่ประมวลผลบน windows เท่านั้น

เครื่องหมาย “/” ในตารางหมายถึง “ใช้ได้กับ”

ที่มา : http://callmebird.com/weblog/css-hacks

Tags: , ,
Posted in C Programming Language

background-repeat

No Comments »

December 17th, 2008 Posted 12:49 pm

รูปแบบการใช้งาน { background-repeat : value; }

คำอธิบาย
 เป็นการกำหนดรูปภาพพื้นหลัง ว่าต้องการให้มีการเรียงต่อรูปภาพ ในกรณีที่ภาพเล็กกว่าเว็บเพจหรือไม่

ค่า (Value) ที่ใช้สำหรับ background-repeat

no-repeat = เป็นการกำหนดไม่ให้มีการวางต่อรูปภาพ หากรูปภาพนั้นมีขนาดเล็กกว่าพื้นที่ที่ต้องการ
repeat = เป็นการกำหนดให้มีการวางต่อรูปภาพ หากรูปภาพนั้นมีขนาดเล็กกว่าพื้นที่ที่ต้องการทั้งด้านแนวนอนและแนวตั้ง
repeat-x = เป็นการกำหนดให้มีการวางต่อรูปภาพ หากรูปภาพนั้นมีขนาดเล็กกว่าพื้นที่ที่ต้องการ เฉพาะด้านแนวนอน
repeat-y = เป็นการกำหนดให้มีการวางต่อรูปภาพ หากรูปภาพนั้นมีขนาดเล็กกว่าพื้นที่ที่ต้องการ เฉพาะด้านแนวตั้ง

 

BY :: http://www.pyayam.com

Tags: ,
Posted in C Programming Language

box model คืออะไร

No Comments »

September 9th, 2008 Posted 11:58 am

ข่าวโครมครามตามชื่อที่พึ่งออกมาตามชื่อว่้า google chrome นะครับของช่วงนี้ที่ google เองได้พัฒนา browser ออกมาเองเลย ทำให้เกิดเป้นข้อสงสัยกันเยอะมากว่า มันจะดีจิงเหรอ แล้ว google ทำออกมาเพื่อที่จะครองตลาดทั้งหมดหรือเปล่า เพราะใน ตลาด คอมพิวเตอร์เองแล้ว google เหลืออีกไม่กี่อย่างที่ยังไม่ครอบคลุมไปถึง เช่น Opetating System แล้ว ก็ สร้างเครื่องขึ้นมาใช้เอง

แต่คนที่มีเงินทุน การสร้างสรรค์สิ่งใหม่ๆ ขึ้นมาก็คงไม่แปลกอะไรนะครับแต่ครอบครองมากเกินไปก็ไม่ดีอีกเพราะมันผูกขาดเกินไป หุหุ

พูดกันยาวนะครับสำหรับเรื่องนี้ ผมก็ได้ลองใ้ช้แล้วแหละครับสำหรับ google chrome เป็นที่พอใจสำหรับผมนะครับ เพราะไม่ห่วงเรื่องการกิน ram เพราะ้เด่วนี้ก็ ram 2GB กันหมดแล้ว ไม่ได้เล่นเกมไป เปิด browser ไปซะหน่อย ขอให้มันใช้ได้อย่างใจพอแล้ว

จะว่าไป Browser เองก็เป็นปัญหาหลายอย่างให้คนทำ web application นะครับเพราะเนื่องจากใช้ engine ต่างๆกันทำให้เขียน application ขึ้นมาแล้วรันไม่ได้กับทุกๆ Browser หรือไม่ก็ต้อง บักกันตาเหลือกเลยทีเดียว Google Chrome ก็เหมือนกัน จากที่ผมใช้นะครับ เรื่องของการแสดงผลที่ เค้าทำเป็นการ์ตูนออกมาว่าได้ Test แล้วเป็นล้านๆหน้านั้น ก็ยังมีทะแม่งๆ อยู่นะครับ

วันนี้ก็เลยนะเสนอ อะไรที่เป็นมาตราฐานซะหน่อยครับ นั่นก็คือ Box Model ครับ

หลายๆ คนอาจจะไม่เคยได้ยินคำว่า Box Model เลยก็ได้นะครับ แต่จะว่าไปแล้ว Box Model นี้เป็นพื้นฐานของ CSS เลยก็ได้ซึ่งความจริงก็พอที่จะรู้ๆ กันอยู่แล้วแต่ไม่รู้ว่ามันคืออะไรนั่นเอง

Box Model เองเป็นหนึ่งบทของ W3 เลยนะครับ เป็นหลักการของ CSS http://www.w3.org/TR/CSS2/box.html

จากรูปนะครับจะเห็นได้ว่าเป็นโครงสร้างของ margin กับ padding นั่นเองซึ่งเป็น model ในการทำงานของ CSS ที่ Browser ทำงานเลยครับ จะทำให้รู้ว่า Content เอง อยู่ตรงใหน ถ้าเล่น google chrome เองแล้วก็จะเห็นว่า google chrome เอา box model มาทำงานด้วย

ถ้าเราเข้าไปที่เมนูควบคมบนขวามือ แล้วเข้าซอนโซน javascript

javaconsol.jpg

boxmodel.jpg

เราจะเห็น box model อยู่ กับการ process css มันก็จะบอก แต่ละ tag เลยว่า เนื้อที่เ่ท่าใหร่กว้างยาว ทำให้ประมวลผลได้อย่างถูกต้อง

ที่เขียนบทความนี้ขึ้นมาเพื่อที่จะบอกว่า ประเทศไทยควรจะเห็นแก่การสร้างมาตราฐานพวกนี้บ้างจะทำให้วงการ IT มีมาตราฐานมากขึ้นหน่อยเพราะหลายๆ เว็บในไทยเปิดได้แต่ IE พอเปิดด้วย Browser อื่นๆ แล้วไม่อยากจะมองเลยเละไปหมด ซึ่งในประเทศไทยเองคนที่ใช้ Browser อื่นๆ ก็มีมากพอสมควร แล้วยิ่ง Google เอง ออก Chrome ออกมาอีก ปัจจุบัน อะไรๆ ก็ต้องพึ่ง google หลายๆ อย่างทั้งค้นหาข้อมูล โปรโมทเว็บ ถ้าต่อไปบริการหลายๆ อย่างติดมากับ google chrome แล้วต้องใช้จิงๆ เราจะได้ดูเว็บเราสวยๆ ตรงตามที่เราต้องการ ใน google chrome ได้ไง อิอิ

ปล. ตั้งแต่เขียน เว็บมา IE มีปัญหาสุด

Tags: , , ,
Posted in web 2.0, web 3.0

Next Page »