มี ที่ นี่

Posts Tagged ‘css’

วันนี้นั่งนึกว่า จะทำยังงัยให้ Print ข้อมูลออกมา โดยแยกเป็นแต่ละหน้าไปเลย

ก้อนั่งจัดอยู่ตั้งนาน เว้นระยะให้มันขึ้นหน้าใหม่ เวลา Print จะได้แยกเป็นแต่ละหน้า แล้วมันก้อไม่ได้ -”-

จนไปเจอ CSS : page-break-after แค่บรรทัดเดียวจบ

<div style=”page-break-after:always;”></div>

หรือจะเขียนแบบ Javascript ก้อ

object.style.pageBreakAfter=”always”

Property Values ยังมีอีกหลายตัว เข้าไปดูที่นี่ได้เลยจ้า http://www.w3schools.com/CSS/pr_print_pageba.asp

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

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

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

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

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

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

ในการเขียน 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 ตามด้วยละ เด่วจะเพี้ยนกันหมด

พอดีได้ไปอ่านเจอในเวบ 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

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

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

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

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

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

Underscore Hack

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

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

Backslash Hack

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

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

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

Star-HTML Hack

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

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

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

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

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

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

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

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

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

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

คำสั่งที่เป็นของ(อยู่ภายในวงเล็บปีกกา) * 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 เท่านั้น

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

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

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

สรุป

ลำดับ	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

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

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

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

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

 

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