วิธีการสร้าง css ที่ใช้งานเฉพาะในบราวเซอร์ safari เท่านั้น

[Ittichai_chupol]

การการจัดการทำการแสดงผลหน้าเว็บไซต์ให้สวยงามนั้น ก็จำเป็น ต้องใช้งานมีการออกแบบหน้าเว็บไซต์ให้มีความเหมาะสมกับเนื้อหารวมจะต้องรู้จักการใช้การจัดวาง html และ css ที่ดีด้วยซึ่งจะทำให้เว็บไซต์ที่พัฒนาขึ้นมามีความสวยงามน่าเขามาใช้งานมากขึ้น แต่ทั้งนี้ในบางครั้งแม้ว่าเราจะจัดรูปแบบ ไว้ดีแล้วแต่บางครั้งการที่จะนำไปเปิดบน บราวเซอร์ที่ต่างกันนั้นก็อาจจะทำให้ได้ผลลัพธ์ที่ได้ตรงตามที่ได้ทดสอบไว้ในครั้งแรก โดย ส่วนใหญ่นั้นผู้ที่พัฒนาออกหน้าเว็บไซต์นั้นจะใช้งาน บนเครื่อง windown และใช้งาน บราวเซอร์ chrome เป็นส่วนที่ใช้งานทดสอบ แต่ผู้ที่เชนำเว็บไซต์ไปใช้งานนั้นอาจจะนำไปเปิดที่ os หรือ บราวเซอร์เซอร์ที่แตกต่างกันไป ซึ่งเขาอาจจะจะพบข้อผิดพลากที่เราไม่ได้พบก็เป็นไปได้ โดยเฉพาะปัญหาที่เกิดขึ้นใน บราวเซอร์ safari โดยทั้งนี้จะมานำเสนอ วิธีการที่จะทำการระบุ css ที่จะใช้เฉพาะใน บราวเซอร์ safari เท่านั้นโดยวิธีการมีดังนี้

ตัวอย่างโคดที่ใช้เป็นส่วนกำหนดว่า ถ้าหากเป็น บราวเซอร์ safari จะเปลี่ยนมาใช้ css ในส่ววนี้

Code: Select all

@media not all and (min-resolution:.001dpcm) { 
    @media {
        ชื่อคลาส / ไอดี ที่จะกำหนด css  { 
            ค่าที่จ้องการกำหนด
        }
    }
}

ตัวอย่างการใช้งาน

Code: Select all

@media not all and (min-resolution:.001dpcm) { 
    @media {
            .search-box .inputbox {
                height: 52px;
                font-size: large;
                line-height: 24px;
            }
            #page-header .search-box .inputbox {
                height: 53px;
            }
    }
}

screenshot-app.lambdatest.com-2020.05.25-12_58_40.png (98.06 KiB) Viewed 554 times

บทตวามที่เกี่ยวข้อง

วิธีการทำ favorite icon เพื่อใช้สำหรับแสดงบน safari
หน่วยของค่าที่ใช้ต่างๆ ใน CSS
การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ