- CATALINA और SAFARI 13 के लिए अद्यतन (प्रारंभिक 2020 अद्यतन) *
नोट: फ़िल्टर और कंपाइलर (जैसे SASS इंजन) मानक 'क्रॉस-ब्राउज़र' कोड की अपेक्षा करते हैं - CSS को इनकी तरह हैक नहीं किया जाता है, जिसका अर्थ है कि वे हैक को फिर से लिखेंगे, नष्ट कर देंगे या हटा देंगे जो कि हैक नहीं करता है। इनमें से अधिकांश गैर-मानक कोड है जो एकल ब्राउज़र संस्करणों को लक्षित करने के लिए श्रमसाध्य रूप से तैयार किए गए हैं और यदि वे बदल दिए गए हैं तो काम नहीं कर सकते हैं। यदि आप इसे उन लोगों के साथ उपयोग करना चाहते हैं, तो आपको अपने चुने हुए CSS हैक को किसी भी फ़िल्टर या कंपाइलर पर लोड करना होगा । यह एक दिया जैसा प्रतीत हो सकता है, लेकिन ऐसे लोगों में बहुत भ्रम पैदा हो गया है, जिन्हें इस बात का अंदाजा नहीं है कि वे इस तरह के सॉफ्टवेयर के जरिए इसे हैक कर रहे हैं, जो इस काम के लिए नहीं बनाया गया था।
संस्करण 6.1 के बाद से सफारी बदल गई है, जैसा कि कई ने देखा है।
कृपया ध्यान दें: यदि आप iOS पर क्रोम [और अब फ़ायरफ़ॉक्स] का उपयोग कर रहे हैं (कम से कम आईओएस संस्करण 6.1 और नए में) और आपको आश्चर्य है कि क्यों कोई भी हैक क्रोम से सफारी को अलग नहीं करता है, ऐसा इसलिए है क्योंकि क्रोम का आईओएस संस्करण सफ़ारी इंजन का उपयोग कर रहा है। यह क्रोम वाले नहीं सफारी सफारी का उपयोग करता है। इसके बारे में यहां और अधिक: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more-like-a-chrome-plated-apple/ iOS के लिए फ़ायरफ़ॉक्स 2015 में जारी किया गया था। यह भी जवाब देता है सफारी भाड़े, लेकिन फ़ायरफ़ॉक्स वाले में से कोई भी, iOS क्रोम के समान।
ALSO: यदि आपने एक या अधिक हैक की कोशिश की है और उन्हें काम करने में परेशानी हो रही है, तो कृपया नमूना कोड (बेहतर अभी तक एक परीक्षण पृष्ठ) पोस्ट करें - जिस हैक का आप प्रयास कर रहे हैं, और जो ब्राउज़र (सटीक)! साथ ही आपके द्वारा उपयोग किए जा रहे डिवाइस का उपयोग कर रहे हैं। उस अतिरिक्त जानकारी के बिना, मेरे लिए या यहाँ किसी अन्य व्यक्ति के लिए आपकी सहायता करना असंभव है।
अक्सर यह एक साधारण फिक्स या एक लापता अर्धविराम होता है। CSS के साथ यह आमतौर पर है कि या किस क्रम में कोड को स्टाइल शीट में सूचीबद्ध किया गया है, यदि सीएसएस की गलतियाँ नहीं हैं। कृपया परीक्षण स्थल पर यहां हैक का परीक्षण करें। यदि यह वहां काम करता है, तो इसका मतलब है कि हैक वास्तव में आपके सेटअप के लिए काम कर रहा है, लेकिन यह कुछ और है जिसे हल करने की आवश्यकता है। यहां के लोग वास्तव में मदद करने के लिए प्यार करते हैं, या कम से कम आपको सही दिशा में इंगित करते हैं।
परीक्षण स्थल:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
और MIRROR!
https://browserstrangeness.github.io/css_hacks.html#safari
सफारी के अधिक हाल के संस्करणों के लिए उपयोग करने के लिए यहां आपके लिए हैक हैं।
आपको इसे पहले प्रयास करना चाहिए क्योंकि यह वर्तमान सफारी संस्करणों को कवर करता है और केवल शुद्ध-सफारी है:
यह अभी भी सफारी 13 (2020 की शुरुआत) के साथ ठीक से काम करता है:
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
अधिक संस्करणों को कवर करने के लिए, 6.1 और ऊपर, इस समय आपको सीएसएस हैक की अगली जोड़ी का उपयोग करना होगा। 6.1-10.0 के लिए एक के साथ जाने के लिए जो 10.1 और ऊपर संभालती है।
तो फिर - यहाँ एक मैं सफारी 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 और सभी नए सफारी संस्करणों के लिए काम करता है। नीचे दिए गए टिप्पणियों में सूचीबद्ध के रूप में भी जागरूक रहें, हैक गैर-मानक सीएसएस है और इसे फ़िल्टर के बाद लागू किया जाना चाहिए। 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 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
सफारी 11.0 के लिए एक:
/* Safari 11.0 (not 11.1) */
html >> * .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
सफारी के लिए एक 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;
}
}}
सफारी 10.0 (गैर-आईओएस डिवाइस):
/* 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;
}
सफारी 9 सीएसएस भाड़े:
सफारी 9.0 और उसके बाद के लिए एक सरल सपोर्ट फ़ीचर क्वेरी हैक:
@supports (-webkit-hyphens:none)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
सफारी 9.0 और उसके बाद के लिए एक साधारण अंडरस्कोर हैक:
_:not(a,b), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
सफारी 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;
}
}
सफारी के लिए 9.0-10.0:
/* Safari 9.0-10.0 (not 10.1) */
_::-webkit-:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
सफारी 9 में अब फीचर डिटेक्शन शामिल है ताकि अब हम इसका उपयोग कर सकें ...
/* Safari 9 */
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
अब केवल iOS उपकरणों को लक्षित करने के लिए। जैसा कि ऊपर उल्लेख किया गया है, चूंकि क्रोम आईओएस पर सफारी में निहित है, इसलिए यह निश्चित रूप से हिट करता है।
/* 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;
}
}
सफ़ारी 9.0+ के लिए एक लेकिन iOS डिवाइस नहीं:
/* Safari 9+ (non-iOS) */
_:default:not(:root:root), .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
और सफारी 9.0-10.0 के लिए एक है, लेकिन आईओएस डिवाइस नहीं:
/* 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 उपकरणों को ब्लॉक करने का तरीका बताया है, यहाँ सफारी 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>
आमतौर पर [इस सवाल की तरह] लोग सफारी हैक्स के बारे में पूछते हैं, ज्यादातर इसे Google Chrome से अलग करने के संदर्भ में होता है (फिर से iOS नहीं!) यह विकल्प पोस्ट करने के लिए महत्वपूर्ण हो सकता है: क्रोम को सफारी से भी अलग से कैसे लक्षित करें, ताकि मैं यहाँ आपके लिए यह प्रदान कर रहा हूँ कि यह आवश्यक हो।
यहां मूल बातें हैं, फिर से क्रोम के कई विशिष्ट संस्करणों के लिए मेरे परीक्षण पृष्ठ की जांच करें, लेकिन ये सामान्य रूप से क्रोम को कवर करते हैं। Chrome इस समय संस्करण 45 है, देव और कैनरी संस्करण इस समय संस्करण 47 तक हैं।
मेरा पुराना मीडिया क्वेरी कॉम्बो जिसे मैंने ब्राउज़रहक्स पर रखा है, अभी भी क्रोम 29+ के लिए काम करता है:
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
Chrome @ 29 के लिए @supports सुविधा क्वेरी अच्छी तरह से काम करती है ... हम नीचे दिए गए Chrome 28+ के लिए उपयोग कर रहे हैं का एक संशोधित संस्करण। सफारी 9, आने वाले फ़ायरफ़ॉक्स ब्राउज़र और Microsoft एज ब्राउज़र को इसके साथ नहीं लिया गया है:
/* 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 और नया लक्ष्य करना आसान था। यह वह है जिसे मैंने अन्य सीएसएस कोड के ब्लॉक में शामिल करने के बाद ब्राउज़रशेक पर भेजा है (मूल रूप से सीएसएस हैक के रूप में नहीं) और महसूस किया कि यह क्या करता है, इसलिए मैंने हमारे उद्देश्यों के लिए प्रासंगिक भाग निकाला:
[नोट:] यह नीचे दी गई पुरानी विधि अब सफारी ९ और माइक्रोसॉफ्ट एज ब्राउज़र को ऊपर के अपडेट के बिना जोड़ देती है। फ़ायरफ़ॉक्स और माइक्रोसॉफ्ट एज के आने वाले संस्करणों ने अपनी प्रोग्रामिंग में कई -webkit- CSS कोड के लिए समर्थन जोड़ा है, और एज और सफारी 9 दोनों ने @supports सुविधा का पता लगाने के लिए समर्थन जोड़ा है। क्रोम और फ़ायरफ़ॉक्स में पहले @supports शामिल थे।
/* Chrome 28+, Now Also Safari 9+, Firefox, and Microsoft Edge */
@supports (-webkit-appearance:none)
{
.chrome_and_safari {
color:#0000FF;
background-color:#CCCCCC;
}
}
क्रोम संस्करणों के ब्लॉक 22-28 (यदि पुराने संस्करणों का समर्थन करने की आवश्यकता है) मेरे सफारी कॉम्बो हैक पर एक मोड़ के साथ लक्षित करना संभव है जिसे मैंने ऊपर पोस्ट किया है:
/* 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(;
सफ़ारी सीएसएस फॉर्मेटिंग हैक के ऊपर, इन्हें निम्नानुसार इस्तेमाल किया जा सकता है:
<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
परीक्षण पृष्ठ में कई अन्य लोगों के साथ-साथ विशेष रूप से संस्करण-आधारित हैं जो आपको क्रोम और सफारी के बीच अंतर करने में मदद करने के लिए, और फ़ायरफ़ॉक्स, माइक्रोसॉफ्ट एज, और इंटरनेट एक्सप्लोरर वेब ब्राउज़रों के लिए कई हैक भी करते हैं।
नोट: यदि आपके लिए कुछ काम नहीं करता है, तो पहले परीक्षण पृष्ठ की जांच करें, लेकिन उदाहरण कोड प्रदान करें और जिसे आप किसी की सहायता के लिए प्रयास कर रहे हैं उसे हैक करें।