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

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

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

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 19403
Joined: 31/03/2014 10:02 am
Contact:

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

Post by thatsawan » 07/03/2015 11:28 am

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

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


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

Code: Select all

.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 681 times
สำหรับ Chrome/Safari ให้เราใช้คำสั่งครอบลงไปก่อน

Code: Select all

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

Code: Select all

@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 681 times


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

  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 24 guests