- ปรับปรุงสำหรับ CATALINA & SAFARI 13 (อัปเดตเมื่อต้นปี 2020) *
หมายเหตุ: ตัวกรองและคอมไพเลอร์ (เช่นเอ็นจิ้น SASS) คาดหวังรหัส 'เบราว์เซอร์ข้ามมาตรฐาน' - ไม่แฮ็ก CSS เช่นนี้หมายความว่าพวกเขาจะเขียนใหม่ทำลายหรือลบแฮ็กเพราะไม่ใช่แฮ็คที่ทำ ส่วนใหญ่เป็นรหัสที่ไม่ได้มาตรฐานซึ่งได้รับการออกแบบมาอย่างพิถีพิถันเพื่อกำหนดเป้าหมายเบราว์เซอร์เวอร์ชันเดียวเท่านั้นและไม่สามารถทำงานได้หากมีการเปลี่ยนแปลง หากคุณต้องการที่จะใช้กับเหล่านั้นคุณต้องโหลดสับ CSS ที่คุณเลือกหลังจากกรองใด ๆ หรือคอมไพเลอร์ สิ่งนี้อาจดูเหมือนเป็นเรื่องที่ให้มา แต่มีความสับสนอย่างมากในหมู่คนที่ไม่ทราบว่าพวกเขากำลังทำการแฮ็คโดยการเปิดใช้งานผ่านซอฟต์แวร์ดังกล่าวซึ่งไม่ได้ออกแบบมาเพื่อจุดประสงค์นี้
Safari มีการเปลี่ยนแปลงตั้งแต่รุ่น 6.1 เป็นจำนวนมากได้สังเกตเห็น
โปรดทราบ: หากคุณใช้ Chrome [และตอนนี้ก็ Firefox] บน iOS (อย่างน้อยใน iOS เวอร์ชัน 6.1 และใหม่กว่า) และคุณสงสัยว่าทำไมไม่มีแฮ็กที่ดูเหมือนจะแยก Chrome ออกจาก Safari นั่นเป็นเพราะ Chrome เวอร์ชัน iOS ของ Chrome กำลังใช้งานโปรแกรม Safari มันใช้ Safari ไม่แฮ็ก Chrome เพิ่มเติมเกี่ยวกับที่นี่: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ Firefox สำหรับ iOS เปิดตัวในฤดูใบไม้ร่วง 2558 นอกจากนี้ยังตอบสนองต่อ Safari Hacks แต่ไม่มี Firefox ใดที่เหมือนกับ iOS Chrome
นอกจากนี้: หากคุณได้ลองแฮ็กอย่างน้อยหนึ่งอย่างและมีปัญหาในการทำงานโปรดโพสต์โค้ดตัวอย่าง (ดีกว่าหน้าทดสอบ) - แฮ็คที่คุณพยายามและเบราว์เซอร์ใด (เวอร์ชั่นที่แน่นอน!) คุณ กำลังใช้งานเช่นเดียวกับอุปกรณ์ที่คุณกำลังใช้ หากไม่มีข้อมูลเพิ่มเติมฉันหรือคนอื่น ๆ ที่นี่จะช่วยเหลือคุณไม่ได้
บ่อยครั้งเป็นการแก้ไขแบบง่ายหรือเซมิโคลอนที่หายไป ด้วย CSS มันมักจะเป็นปัญหานั้นเกิดจากการสั่งซื้อรหัสจะแสดงอยู่ในสไตล์ชีทถ้าไม่ใช่แค่ข้อผิดพลาด CSS กรุณาทดสอบแฮ็กที่นี่ในเว็บไซต์ทดสอบ หากใช้งานได้หมายความว่าแฮ็คใช้งานได้จริงสำหรับการตั้งค่าของคุณ แต่เป็นสิ่งอื่นที่ต้องแก้ไข คนที่นี่ชอบช่วยเหลือหรืออย่างน้อยก็ชี้คุณไปในทิศทางที่ถูกต้อง
เว็บไซต์ทดสอบ:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
และกระจก!
https://browserstrangeness.github.io/css_hacks.html#safari
นี่เป็นวิธีที่คุณไม่ควรใช้กับ Safari เวอร์ชันล่าสุด
คุณควรลองตัวนี้ก่อนเพราะมันครอบคลุมเวอร์ชั่น Safari ปัจจุบันและเป็น pure-Safari เท่านั้น:
อันนี้ยังใช้งานได้กับ Safari 13 (ต้นปี 2020):
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
เพื่อให้ครอบคลุมเวอร์ชั่นเพิ่มเติม 6.1 และสูงกว่าในเวลานี้คุณต้องใช้ css hacks คู่ต่อไป หนึ่งสำหรับ 6.1-10.0 ไปกับคนที่จัดการ 10.1 ขึ้นไป
ดังนั้น - นี่คือสิ่งที่ฉันทำเพื่อ Safari 10.1+:
การสืบค้นสื่อคู่มีความสำคัญที่นี่อย่าลบออก
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
ลองใช้วิธีนี้หาก SCSS หรือชุดเครื่องมืออื่นมีปัญหากับการสืบค้นสื่อที่ซ้อนกัน:
/* Safari 10.1+ (alternate method) */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
อันต่อไปนี้ใช้กับ 6.1-10.0 แต่ไม่ใช่ 10.1 (อัปเดตช่วงปลายเดือนมีนาคม 2017)
แฮ็คนี้ฉันสร้างมาหลายเดือนของการทดสอบและการทดลองโดยการรวมแฮ็กอื่น ๆ
หมายเหตุ: เช่นเดียวกับข้างต้นข้อความค้นหาสื่อคู่นั้นไม่ได้เกิดอุบัติเหตุเพราะเป็นข้อ จำกัด เบราว์เซอร์รุ่นเก่าที่ไม่สามารถจัดการกับการซ้อนข้อความค้นหาสื่อได้ - ช่องว่างที่ขาดหายไปหลังจากสิ่งใดสิ่งหนึ่ง 'และมีความสำคัญเช่นกัน นี่เป็นเพราะแฮ็ค ... และเป็นแฮ็คเดียวที่ทำงานได้กับ 6.1 และเวอร์ชั่นใหม่กว่าของ Safari ในเวลานี้ นอกจากนี้ควรระวังตามที่ระบุไว้ในความคิดเห็นด้านล่างแฮ็คนั้นไม่ใช่ css ที่ไม่ได้มาตรฐานและจะต้องนำไปใช้หลังตัวกรอง ตัวกรองเช่นเครื่องยนต์ SASS จะเขียน / เลิกทำหรือลบทิ้งทั้งหมด
ตามที่กล่าวไว้ข้างต้นโปรดตรวจสอบหน้าทดสอบของฉันเพื่อดูว่าทำงานได้ตามปกติ (โดยไม่มีการดัดแปลง!)
และนี่คือรหัส:
/* Safari 6.1-10.0 (not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
สำหรับ Safari รุ่น 'เฉพาะเจาะจง' เพิ่มเติมโปรดอ่านต่อไปด้านล่าง
/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
หนึ่งสำหรับ Safari 11.0:
/* Safari 11.0 (not 11.1) */
html >> * .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
หนึ่งรายการสำหรับ Safari 10.0:
/* Safari 10.0 (not 10.1) */
_::-webkit-:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
ดัดแปลงเล็กน้อยสำหรับ 10.1 (เท่านั้น):
/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Safari 10.0 (อุปกรณ์ที่ไม่ใช่ iOS):
/* Safari 10.0 (not 10.1) but not on iOS */
_::-webkit-:-webkit-full-screen:host:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 CSS Hacks:
รองรับการแฮกแบบสอบถามแบบง่าย ๆ สำหรับ Safari 9.0 และสูงกว่า:
@supports (-webkit-hyphens:none)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
แฮ็กที่ขีดเส้นใต้ง่ายสำหรับ Safari 9.0 และสูงกว่า:
_:not(a,b), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
อีกอันสำหรับ Safari 9.0 และสูงกว่า:
/* Safari 9+ */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
และฟีเจอร์การสนับสนุนอื่น ๆ ก็เช่นกัน:
/* Safari 9+ */
@supports (-webkit-marquee-repetition:infinite) and (object-fit:fill) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
หนึ่งสำหรับ Safari 9.0-10.0:
/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
Safari 9 ตอนนี้มีการตรวจจับคุณสมบัติเพื่อให้เราสามารถใช้งานได้ทันที ...
/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
ตอนนี้เพื่อกำหนดเป้าหมายอุปกรณ์ iOS เท่านั้น ดังที่กล่าวไว้ข้างต้นเนื่องจาก Chrome บน iOS ได้รับการรูตใน Safari จึงเป็นที่นิยมเช่นกัน
/* Safari 9.0 (iOS Only) */
@supports (-webkit-text-size-adjust:none) and (not (-ms-ime-align:auto))
and (not (-moz-appearance:none))
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
หนึ่งรายการสำหรับ Safari 9.0+ แต่ไม่ใช่อุปกรณ์ iOS:
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
และอีกอันสำหรับ Safari 9.0-10.0 แต่ไม่ใช่อุปกรณ์ iOS:
/* Safari 9.0-10.0 (not 10.1) (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
ด้านล่างนี้เป็นแฮ็กที่แยก 6.1-7.0 และ 7.1+ สิ่งเหล่านี้จำเป็นต้องใช้การรวมแฮ็กหลายแบบเพื่อให้ได้ผลลัพธ์ที่ถูกต้อง:
/* Safari 6.1-7.0 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-color-index:0)
{
.safari_only {(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
เนื่องจากฉันได้ชี้ให้เห็นวิธีในการบล็อกอุปกรณ์ iOS นี่คือเวอร์ชันแฮ็กของ Safari 6.1+ ที่แก้ไขซึ่งกำหนดเป้าหมายไปยังอุปกรณ์ที่ไม่ใช่ iOS:
/* Safari 6.1-10.0 (not 10.1) (non-iOS) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
{ @media {
_:-webkit-full-screen, .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
วิธีใช้
<div class="safari_only">This text will be Blue in Safari</div>
โดยปกติ [เหมือนในคำถามนี้] เหตุผลที่ผู้คนถามเกี่ยวกับ Safari แฮ็คส่วนใหญ่อ้างอิงจาก Google Chrome (ไม่ใช่ iOS อีกครั้ง!) การโพสต์ทางเลือกอื่นอาจเป็นเรื่องสำคัญ: วิธีกำหนดเป้าหมาย Chrome แยกจาก Safari ด้วยเช่นกัน ฉันกำลังจัดหาสิ่งนี้ให้คุณที่นี่ในกรณีที่จำเป็น
ต่อไปนี้เป็นข้อมูลเบื้องต้นให้ตรวจสอบหน้าทดสอบอีกครั้งสำหรับ Chrome เฉพาะรุ่นจำนวนมาก แต่ครอบคลุม Chrome โดยทั่วไป Chrome เป็นรุ่น 45, รุ่น Dev และ Canary ขึ้นอยู่กับรุ่น 47 ในขณะนี้
คำสั่งผสมสื่อการสืบค้นเก่าของฉันที่ฉันใส่ในเบราว์เซอร์ยังคงใช้งานได้กับ Chrome 29+:
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
แบบสอบถามคุณลักษณะ @supports ทำงานได้ดีสำหรับ Chrome 29+ เช่นกัน ... เวอร์ชันที่ปรับเปลี่ยนแล้วของเวอร์ชันที่เราใช้สำหรับ Chrome 28+ ด้านล่าง Safari 9, เบราว์เซอร์ Firefox ที่กำลังมาถึงและเบราว์เซอร์ Microsoft Edge จะไม่ถูกนำมาใช้กับอันนี้:
/* Chrome 29+ */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none))
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
ก่อนหน้านี้ Chrome 28 และใหม่กว่านั้นง่ายต่อการกำหนดเป้าหมาย นี่คือสิ่งที่ฉันส่งไปยัง browserhacks หลังจากเห็นมันรวมอยู่ในบล็อกของโค้ด CSS อื่น ๆ (แต่เดิมไม่ได้ตั้งใจว่าจะเป็นการแฮ็ก CSS) และตระหนักว่ามันทำอะไรดังนั้นฉันจึงแยกส่วนที่เกี่ยวข้องเพื่อวัตถุประสงค์ของเรา:
[หมายเหตุ:] วิธีที่เก่ากว่านี้ด้านล่างนี้แสดงภาพ Safari 9 และเบราว์เซอร์ Microsoft Edge โดยไม่มีการอัปเดตข้างต้น Firefox และ Microsoft Edge ที่กำลังจะมาได้เพิ่มการสนับสนุนสำหรับโค้ด -webkit- CSS หลายรายการในการเขียนโปรแกรมของพวกเขาและทั้ง Edge และ Safari 9 ได้เพิ่มการรองรับการตรวจจับคุณสมบัติ @supports Chrome และ Firefox รวม @supports ก่อนหน้านี้
/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */
@supports (-webkit-appearance:none)
{
.chrome_and_safari {
color:#0000FF;
background-color:#CCCCCC;
}
}
บล็อกของ Chrome เวอร์ชัน 22-28 (หากจำเป็นเพื่อรองรับเวอร์ชั่นที่เก่ากว่า) สามารถกำหนดเป้าหมายด้วยการบิดแฮ็กคอมโบ Safari ของฉันที่ฉันโพสต์ไว้ด้านบน:
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0)
{
.chrome_only {-chrome-:only(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
NOTE: If you are new, change class name but leave this the same-> {-chrome-:only(;
เช่นเดียวกับการแฮ็คการจัดรูปแบบ Safari CSS ด้านบนสามารถใช้สิ่งเหล่านี้ได้ดังนี้:
<div class="chrome_only">This text will be Blue in Chrome</div>
ดังนั้นคุณไม่ต้องค้นหาในโพสต์นี้นี่คือหน้าทดสอบสดของฉันอีกครั้ง:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
[หรือกระจก]
https://browserstrangeness.github.io/css_hacks.html#safari
หน้าทดสอบนั้นมีอีกหลายรุ่นเช่นกันโดยเฉพาะเวอร์ชันที่ใช้เพื่อช่วยให้คุณแยกแยะความแตกต่างระหว่าง Chrome และ Safari และยังมีแฮ็กมากมายสำหรับ Firefox, Microsoft Edge และเว็บเบราว์เซอร์ Internet Explorer
หมายเหตุ: หากสิ่งที่ไม่ได้ผลสำหรับคุณให้ตรวจสอบหน้าทดสอบก่อน แต่ให้รหัสตัวอย่างและแฮ็คที่คุณพยายามให้ทุกคนช่วยเหลือคุณ