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

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

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

ภาพประจำตัวสมาชิก
Ittichai_chupol
PHP VIP Members
PHP VIP Members
โพสต์: 5410
ลงทะเบียนเมื่อ: 19/09/2018 10:33 am

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

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

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

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

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

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

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

@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
screenshot-app.lambdatest.com-2020.05.25-12_58_40.png (98.06 KiB) Viewed 2284 times

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

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

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

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