TIP : เขียนคำสั่ง CSS เเยก browser

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 28508
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

TIP : เขียนคำสั่ง CSS เเยก browser

โพสต์ที่ยังไม่ได้อ่าน โดย thatsawan »

TIP : เขียนคำสั่ง CSS เเยก browser
สำหรับนักพัฒนา CSS หลายๆคน ต้องเซงจะเบื่อกับการปรับ CSS พอปรับเล็ง CSS ใน firefox เเต่พอมาเปิดกับ Chrome เละ!! ปรับเท่าไรก็ไม่ได้สักที ใน TIP บทความนี้เราจะยกตัวอย่างคำสั่งที่จะช่วยให้เราสามารถเขียน CSS เเยกไปเลยระหว่าง browser ค่ะ

_____________________________________________________________________________________________
บทความนี้เเป็นบทความที่จัดทำขึ้นเพื่อเนะนำเครื่องมือช่วยสำหรับนักพัฒนา CSS ซึ่งเป็นความรู้พื้นฐานในการพัฒนา JavaScrip, JQuery หรือเเม้กระทั้ง Ajax ต่อไป ทั้งนี้สามารถดูรายละเอียด TIP ต่างๆ ได้ที่นี่ค่ะ เเละขอเเนะนำความรู้ที่เกี่ยวข้องกับโดยสามารถศึกษาได้จากบทเรียน CSS ได้ที่นี่ เพื่อเพิ่มความเข้าใจในการใช้งานเครื่องมือต่างๆ ค่ะ
_____________________________________________________________________________________________


เริ่มกันเลย ^^
สำหรับ firefox and other browsers เราสามารถที่จะเขียน CSS ลงไปแบบที่เราเขียนได้เลย

โค้ด: เลือกทั้งหมด

.postprofile_new .avatar img {
    border-radius: 50%;
    display: block;
    height: 100px !important;
    align-content: center;
    width: 100px;
    margin: 10px 10px;
}
ผลที่แสดง
2015-03-07_11-30-04.png
2015-03-07_11-30-04.png (22.91 KiB) Viewed 1138 times
สำหรับ Chrome/Safari ให้เราใช้คำสั่งครอบลงไปก่อน

โค้ด: เลือกทั้งหมด

@media screen and (-webkit-min-device-pixel-ratio:0) {
}

โค้ด: เลือกทั้งหมด

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .postprofile_new .avatar img {
       border-radius: 50%;
       display: block;
       height: 100px !important;
       align-content: center;
       width: 100px;
       margin-left: 10px;
       margin-right: 25px;
       margin-bottom: 10px;
       margin-top: 10px;
   }
}
ผลที่แสดง
2015-03-07_11-29-22.png
2015-03-07_11-29-22.png (21.34 KiB) Viewed 1138 times


** สังเกตุที่ margin ทั้ง 2 browsers ถ้าใช้ขนาดที่เท่ากันจะแสดงผลที่ไม่เหมือนกัน เราจึงใช้คำสั่งแยก browsers มาครอบเเล้วกำหนดค่าที่เเตกต่างกันได้ค่ะ **
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 35