สำหรับนักพัฒนา 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;
}
โค้ด: เลือกทั้งหมด
@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;
}
}
** สังเกตุที่ margin ทั้ง 2 browsers ถ้าใช้ขนาดที่เท่ากันจะแสดงผลที่ไม่เหมือนกัน เราจึงใช้คำสั่งแยก browsers มาครอบเเล้วกำหนดค่าที่เเตกต่างกันได้ค่ะ **