- ক্যাটালিনা ও সাফারি ১৩ (২০২০ এর প্রথম দিকে আপডেটের জন্য আপডেট) *
দ্রষ্টব্য: ফিল্টার এবং সংকলক (যেমন SASS ইঞ্জিন) স্ট্যান্ডার্ড 'ক্রস-ব্রাউজার' কোডের প্রত্যাশা করে - সিএসএস হ্যাকগুলি নয় যার অর্থ তারা হ্যাকগুলি পুনর্লিখন, ধ্বংস বা মুছে ফেলবে কারণ হ্যাকগুলি এটি করে না। এর বেশিরভাগটি হ'ল মানহীন কোড যা কেবলমাত্র একক ব্রাউজার সংস্করণগুলিকে টার্গেট করার জন্য শ্রমসাধ্যভাবে তৈরি করা হয়েছিল এবং সেগুলি পরিবর্তিত হলে কাজ করতে পারে না। আপনি যদি এটির সাথে এটি ব্যবহার করতে চান তবে আপনার নির্বাচিত সিএসএস হ্যাকটি কোনও ফিল্টার বা সংকলক পরে লোড করতে হবে । এটি একটি প্রদত্ত বলে মনে হতে পারে তবে এমন অনেক লোকের মধ্যে বিভ্রান্তি সৃষ্টি হয়েছে যারা বুঝতে পারেন না যে তারা এই জাতীয় সফটওয়্যারটির মাধ্যমে এটি একটি হ্যাককে পূর্বাবস্থায় আনছেন যা এই উদ্দেশ্যে তৈরি করা হয়নি।
সাফারি 6.1 সংস্করণ থেকে পরিবর্তিত হয়েছে, যেমনটি অনেকে লক্ষ্য করেছেন।
দয়া করে নোট করুন: আপনি যদি আইওএসে ক্রোম [এবং এখন ফায়ারফক্স] ব্যবহার করছেন (কমপক্ষে আইওএস সংস্করণ .1.১ এবং আরও নতুন সংস্করণে) এবং আপনি অবাক হন কেন কোনও হ্যাক সাফারি থেকে ক্রোমকে আলাদা করে না বলে মনে হয়, কারণ এটি ক্রোমের আইওএস সংস্করণ Chrome সাফারি ইঞ্জিন ব্যবহার করছে। এটি সাফারি হ্যাক ব্যবহার করে ক্রোমগুলি নয়। এটি সম্পর্কে এখানে আরও: https://allthingsd.com/20120628/googles-chrome-for-ios-is-more- Like-a-chrome-plated-apple/ আইওএসের জন্য ফায়ারফক্স ফলের 2015 সালে প্রকাশিত হয়েছিল It এটির প্রতিক্রিয়াও সাফারি হ্যাকস, তবে ফায়ারফক্সের কোনওটিই আইওএস ক্রোমের মতো নয়।
এছাড়াও: আপনি যদি এক বা একাধিক হ্যাকের চেষ্টা করে থাকেন এবং সেগুলি কাজ করতে সমস্যা হয় তবে দয়া করে নমুনা কোড পোস্ট করুন (একটি পরীক্ষার পৃষ্ঠা আরও ভাল) - আপনি যে হ্যাকটি চেষ্টা করছেন এবং ব্রাউজারগুলি কী (সঠিক সংস্করণ!) আপনি আপনি যে ডিভাইসটি ব্যবহার করছেন সেগুলিও ব্যবহার করছে। এই অতিরিক্ত তথ্য ব্যতীত আমার বা এখানে অন্য কারও পক্ষে আপনাকে সহায়তা করা অসম্ভব।
প্রায়শই এটি একটি সাধারণ ফিক্স বা অনুপস্থিত অর্ধিকোলন। সিএসএস সহ এটি সাধারণত বা কোনও সমস্যা যা কোডটি স্টাইল শিটগুলিতে তালিকাভুক্ত করা হয় তা যদি কেবল সিএসএস ত্রুটি না হয়। পরীক্ষার সাইটে এখানে হ্যাক পরীক্ষা করুন। যদি এটি সেখানে কাজ করে তবে এর অর্থ হ্যাক সত্যিই আপনার সেটআপের জন্য কাজ করছে, তবে এটি সমাধান করার দরকার অন্য কিছু। এখানকার লোকেরা সত্যই সহায়তা করতে ভালোবাসে বা কমপক্ষে আপনাকে সঠিক দিকে নির্দেশ করবে।
পরীক্ষার সাইট:
https://browserstrangeness.bitbucket.io/css_hacks.html#safari
এবং মিরর!
https://browserstrangeness.github.io/css_hacks.html#safari
সাফারিটির আরও সাম্প্রতিক সংস্করণগুলির জন্য আপনাকে এখানে ব্যবহার করা হ্যাকস।
এটি এখনকার সাফারি সংস্করণগুলিকে অন্তর্ভুক্ত করার কারণে আপনার এটি প্রথমে চেষ্টা করা উচিত এবং এটি খাঁটি-সাফারি:
এটি এখনও সাফারি ১৩ (২০২০-এর শুরুর দিকে) সাথে সঠিকভাবে কাজ করে:
/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
6.1 বা তার বেশি সংস্করণগুলি কভার করার জন্য এই মুহূর্তে আপনাকে পরের জোড়া সিএসএস হ্যাক ব্যবহার করতে হবে। 10.1 এবং তার বেশিগুলি পরিচালনা করে এমন একটিতে 6.1-10.0 এর জন্য একটি।
তারপরে - সাফারি 10.1+ এর জন্য আমি যে কাজটি করেছি তা এখানে রয়েছে:
ডাবল মিডিয়া ক্যোয়ারী এখানে গুরুত্বপূর্ণ, এটি অপসারণ করবেন না।
/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) { @media {
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
যদি এসএসএসএস বা অন্য সরঞ্জাম সেটটিতে নেস্টেড মিডিয়া ক্যোয়ারিতে সমস্যা হয় তবে এটি ব্যবহার করে দেখুন:
/* 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;
}
}}
সাফারি ১১.০ এর জন্য একটি:
/* 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+ এর জন্য একটি তবে আইওএস ডিভাইস নয়:
/* 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;
}
নীচে result.১-7.০ এবং separate.১+ পৃথক হ্যাকগুলি রয়েছে যার সঠিক ফলাফল পেতে আরও একাধিক হ্যাকের সংমিশ্রণ প্রয়োজন:
/* 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;
);}
}
যেহেতু আমি আইওএস ডিভাইসগুলি ব্লক করার উপায়টি নির্দেশ করেছি, তাই এখানে সাফারি 6.1+ হ্যাকের সংশোধিত সংস্করণটি হ'ল নন-আইওএস ডিভাইসগুলিকে লক্ষ্য করে:
/* 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>
সাধারণত [এই প্রশ্নের মতো] লোকেরা সাফারি হ্যাক সম্পর্কে জিজ্ঞাসা করার কারণটি এটি বেশিরভাগ ক্ষেত্রে গুগল ক্রোম থেকে আলাদা করার প্রসঙ্গে (আবার আইওএস নয়!) বিকল্পটি পোস্ট করা গুরুত্বপূর্ণ হতে পারে: কীভাবে সাফারি থেকে আলাদাভাবে ক্রোমকে লক্ষ্যবস্তু করা যায়, তাই এটি প্রয়োজন হলে এখানে এটি সরবরাহ করছি।
এখানে বেসিকগুলি আবার ক্রোমের প্রচুর নির্দিষ্ট সংস্করণের জন্য আমার পরীক্ষার পৃষ্ঠাটি দেখুন, তবে সাধারণভাবে ক্রমটি ক্রম করে। ক্রোমটি 45 সংস্করণ, দেব এবং ক্যানারি সংস্করণগুলি এখন 47 সংস্করণে রয়েছে version
আমার পুরানো মিডিয়া ক্যোয়ারী কম্বো আমি ব্রাউজারহ্যাকগুলিতে রেখেছি এখনও ক্রোম 29+ এর জন্য কাজ করে:
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm)
{
.chrome_only {
color:#0000FF;
background-color:#CCCCCC;
}
}
একটি @ সমর্থিত বৈশিষ্ট্য ক্যোয়ারী ক্রোম 29+ এর জন্যও ভাল কাজ করে ... আমরা নীচে ক্রোম 28+ এর জন্য ব্যবহার করছি তার একটি পরিবর্তিত সংস্করণ। সাফারি 9, আগত ফায়ারফক্স ব্রাউজার এবং মাইক্রোসফ্ট এজ ব্রাউজারটি এটির সাথে নেওয়া হয়নি:
/* 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;
}
}
পূর্বে, ক্রোম 28 এবং আরও নতুন লক্ষ্য করা সহজ ছিল। এটি অন্যটি সিএসএস কোডের একটি ব্লকের মধ্যে অন্তর্ভুক্ত দেখার পরে ব্রাউজারচ্যাকগুলিতে আমি প্রেরণ করেছি (এটি মূলত সিএসএস হ্যাক হিসাবে চিহ্নিত নয়) এবং বুঝতে পারে এটি কী করে, তাই আমরা আমাদের উদ্দেশ্যে প্রাসঙ্গিক অংশটি বের করেছি:
[দ্রষ্টব্য:] নীচের এই পুরানো পদ্ধতিটি এখন উপরের আপডেট ছাড়াই সাফারি 9 এবং মাইক্রোসফ্ট এজ এজ ব্রাউজারটিকে তুলে ধরে। ফায়ারফক্স এবং মাইক্রোসফ্ট এজের আসন্ন সংস্করণগুলি তাদের প্রোগ্রামিংয়ে একাধিক-ওয়েবেকিট-সিএসএস কোডগুলির জন্য সমর্থন যোগ করেছে এবং এজ এবং সাফারি 9 উভয়ই @ সমর্থনগুলি বৈশিষ্ট্য সনাক্তকরণের জন্য সমর্থন যোগ করেছে। ক্রোম এবং ফায়ারফক্স এর আগে @ সমর্থনগুলি অন্তর্ভুক্ত করেছিল।
/* 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
পরীক্ষামূলক পৃষ্ঠাটিতে আরও অনেকগুলি রয়েছে, বিশেষত সংস্করণ-ভিত্তিক আপনাকে ক্রোম এবং সাফারি এবং ফায়ারফক্স, মাইক্রোসফ্ট এজ এবং ইন্টারনেট এক্সপ্লোরার ওয়েব ব্রাউজারগুলির জন্য আরও হ্যাক করতে সহায়তা করে।
দ্রষ্টব্য: যদি কিছু আপনার পক্ষে কাজ করে না, তবে প্রথমে পরীক্ষার পৃষ্ঠাটি পরীক্ষা করে দেখুন, তবে উদাহরণ কোড এবং হ্যাক যাকে আপনি যে কাউকে সহায়তা করার চেষ্টা করছেন তা সরবরাহ করুন।