ওয়েবকিট কী এবং এটি সিএসএসের সাথে কীভাবে সম্পর্কিত?


277

সাম্প্রতিককালে, আমি "ওয়েবকিট" ট্যাগটি দিয়ে প্রশ্নগুলি দেখছি। এই জাতীয় প্রশ্নগুলি সাধারণত CSS, jQuery, লেআউট, ক্রস-ব্রাউজারের সামঞ্জস্যতা সম্পর্কিত সমস্যা সম্পর্কিত ওয়েব-ভিত্তিক প্রশ্ন হতে পারে ...

সুতরাং এই "ওয়েবকিট" কী এবং এটি সিএসএসের সাথে কীভাবে সম্পর্কিত? -webkit-...বিভিন্ন ওয়েবসাইটের সোর্স কোডেও আমি প্রচুর বৈশিষ্ট্য লক্ষ্য করেছি । এই দুটি কি সম্পর্কিত?

হালনাগাদ

এখন পর্যন্ত উত্তরগুলি থেকে ... ওয়েবকিট একটি সাফারি / ক্রোমের জন্য একটি এইচটিএমএল / সিএসএস ওয়েব ব্রাউজার রেন্ডারিং ইঞ্জিন। আইই / অপেরা / ফায়ারফক্সের জন্য কি এমন ইঞ্জিন রয়েছে এবং একে অপরকে ব্যবহার করার মতভেদগুলি কী? আমি উদাহরণস্বরূপ ফায়ারফক্সে ওয়েবকিট বৈশিষ্ট্যগুলি ব্যবহার করতে পারি?

চূড়ান্ত প্রশ্ন ... ওয়েবকিট আইই সমর্থন করে?

আপডেট 2

সমস্ত প্রধান ব্রাউজার বিভিন্ন রেন্ডারিং ইঞ্জিন ব্যবহার করে। আমার ধারণা, এত ক্রস ব্রাউজারের সামঞ্জস্যের সমস্যা কেন এটিই একটি বড় কারণ!

সুতরাং, কোনও স্ট্যান্ডার্ড রেন্ডারিং ইঞ্জিনে এমন কোনও প্রকল্প বা গতিবিধি রয়েছে যা সমস্ত ব্রাউজার ব্যবহার করবে? এইচটিএমএল 5 কি ক্রস-ব্রাউজারের সামঞ্জস্যতা সমস্যার সমাধান করবে?


1
আপনার চূড়ান্ত প্রশ্নটি কার্যকরভাবে "কী এমন বিষয় সরবরাহ করতে বলা যেতে পারে যা রেন্ডার করার জন্য প্রোগ্রাম করা হয়নি?", এবং উত্তরটি নেই
গ্যারেথ

ফায়ারফক্সের রেন্ডারিং ইঞ্জিনকে গেকো বলা হয়। অর্থাত্ তাদের নিজস্ব pripietary ইঞ্জিন ব্যবহার করে।
troelskn

@ গ্যারেথ ... ধন্যবাদ আমি ঠিক তেমনটাই প্রত্যাশা করছিলাম না: এই ক্ষেত্রে, আমি আশা করি খুব শীঘ্রই আইই সামঞ্জস্যপূর্ণ হওয়া শুরু করতে পারে ... এবং লোকেরা আই 6 ব্যবহার করা বন্ধ করে দেয়!
Hristo

6
সিএসএসের মাধ্যমে আইইতে যুক্ত হওয়া কিছু ওয়েবকিট কার্যকারিতার জন্য css3pie.com দেখুন ।
কেনয়য়ের130

ওয়েবকিট হ'ল সবচেয়ে খারাপ এইচটিএমএল রেন্ডারিং ইঞ্জিন, কোনওটিই বার নয়। খারাপ অর্থ খারাপ নয়, এনডাব্লুএকে উদ্ধৃত করা, তবে খারাপ অর্থ ভাল।
Dagg Nabbit

উত্তর:


168

আপডেট: সুতরাং স্পষ্টতই, ওয়েবকিট একটি সাফারি / ক্রোমের জন্য একটি এইচটিএমএল / সিএসএস ওয়েব ব্রাউজার রেন্ডারিং ইঞ্জিন। আইই / অপেরা / ফায়ারফক্সের জন্য কি এমন ইঞ্জিন রয়েছে এবং একে অপরকে ব্যবহার করার মতভেদগুলি কী? আমি উদাহরণস্বরূপ ফায়ারফক্সে ওয়েবকিট বৈশিষ্ট্যগুলি ব্যবহার করতে পারি?

এইচটিএমএল / সিএসএস ওয়েব পৃষ্ঠা আঁকার জন্য প্রতিটি ব্রাউজার একটি উপস্থাপনা ইঞ্জিন দ্বারা সমর্থিত।

বিভিন্ন ক্ষেত্রে তুলনা তালিকার জন্য ওয়েব ব্রাউজার ইঞ্জিনের তুলনা দেখুন ।

চূড়ান্ত প্রশ্ন ... ওয়েবকিট আইই সমর্থন করে?

নেটিভ না।


.. আমার আপডেট সম্বোধনের জন্য ধন্যবাদ। সুতরাং, যদি আইই ওয়েবকিট সমর্থন করে না, এবং আমি জানি এটি -moz-বৈশিষ্ট্যগুলি সমর্থন করে না ... আমি কীভাবে আই এস সিএস 3 স্টাইল গ্রহণ করতে পারি?
Hristo

@ হিস্টো: আপনার প্রয়োজন কোন স্টাইলের উপর নির্ভর করে।
কেনেটিএম

আমার মনে কোনও বিশেষ ধারণা ছিল না ... আমি কেবল জানি যে ক্রস ব্রাউজারের সামঞ্জস্যের বিষয়টি যখন আইই চুষে পায় এবং আমি ভাবছিলাম যে ওয়েবকিট এই সমস্যাটি সমাধান করার উপায় ছিল কিনা।
Hristo

3
আপডেট করা উচিত। ক্রোম দেব এর ওয়েবকিট কাঁটাচামচ করেছে, এবং অপেরা আর প্রেস্টো ব্যবহার করছে না
রিচার্ড

1
এজএইচটিএমএল এখন বন্ধ করে দেওয়া হয়েছে।
ড্রিমটেক

115

@ কেনিটিএম যা বলেছিল তার সাথে যুক্ত:

1) 12 ফেব্রুয়ারী 2013 অপেরা (সংস্করণ 15+) তারা ঘোষণা করেছে যে তারা তাদের নিজস্ব ইঞ্জিন প্রেস্টো থেকে ব্লিঙ্ক নামে ওয়েবকিটে চলে গেছে ।

2) 3 এপ্রিল 2013 এ গুগল (ক্রোম সংস্করণ 28+) ঘোষণা করেছে যে তারা ওয়েবকিট-ভিত্তিক ব্লিঙ্ক ইঞ্জিন ব্যবহার করতে চলেছে ।

3) 6 ডিসেম্বর 2018 মাইক্রোসফ্ট (মাইক্রোসফ্ট এজ 79+ স্থিতিশীল) ঘোষণা করেছে যে তারা ওয়েবকিট-ভিত্তিক ব্লিঙ্ক ইঞ্জিন ব্যবহার করতে চলেছে ।


2
.. এটা দুর্দান্ত তথ্য! তাহলে কি বিভিন্ন রেন্ডারিং ইঞ্জিনগুলি এই উপসর্গগুলি উপেক্ষা করবে? অর্থাত হায় ফায়ারফক্স উপেক্ষা -msie, -o, -webkit; হায় ওয়েবকিট উপেক্ষা -moz, -o, -msie; ইত্যাদি ...?
Hristo

1
@ হিস্টো হ্যাঁ, এটি কোনওটিকে বৈধ সিএসএস হিসাবে স্বীকৃতি দেয় না, তাই এটি তাদের উপেক্ষা করে
জে কেরিচার্টজ

1
জে কিরচার্টস সঠিক। অন্যান্য ব্রাউজারগুলি একে অপরকে সিএসএস-উপসর্গ উপেক্ষা করবে।
জেরোন

2
এবং অপেরা যে ওয়েবকিটটিতে চলেছে তা হ'ল ক্রোমিয়াম বিচিত্র, যা নিজেই ব্লিঙ্কে রূপান্তরিত হয়।
BoltClock

41

ওয়েবকিট একটি ওয়েব ব্রাউজার রেন্ডারিং ইঞ্জিন যা সাফারি এবং ক্রোম দ্বারা ব্যবহৃত হয় (অন্যদের মধ্যে, তবে এগুলি জনপ্রিয় হিসাবে রয়েছে)।

-webkitCSS সিলেক্টর উপর উপসর্গ বৈশিষ্ট্য যে হয় শুধুমাত্র এই ইঞ্জিন প্রক্রিয়া, খুব অনুরূপ উদ্দেশ্যে -mozবৈশিষ্ট্য। আমাদের মধ্যে অনেকে আশা করছেন এটি চলে যায়, উদাহরণস্বরূপ -webkit-border-radiusমান দ্বারা প্রতিস্থাপন করা border-radiusহবে এবং একাধিক ব্রাউজারগুলির জন্য একই জিনিসটির জন্য আপনার একাধিক নিয়মের প্রয়োজন হবে না । এটি সত্যই "প্রাক-স্পেসিফিকেশন" বৈশিষ্ট্যগুলির ফলাফল যা এটি যখন স্ট্যান্ডার্ড সংস্করণে আসে তখন হস্তক্ষেপ না করার উদ্দেশ্যে করা হয়।

আপনার আপডেটের জন্য: ... না এটি আসলেই আইইয়ের সাথে সম্পর্কিত নয়, IE কমপক্ষে 9 এর আগে ট্রাইডেন্ট নামে একটি ভিন্ন রেন্ডারিং ইঞ্জিন ব্যবহার করে ।


2
তাই -webkit-CSS3 বৈশিষ্ট্যগুলির উন্নত রেন্ডারিংয়ের জন্য ফায়ারফক্সের মতো ব্যবহার করা যেতে পারে?
Hristo

1
না, ফায়ারফক্স গেকো
গ্যারেথ

2
@ হিস্টো - ফায়ারফক্স কিছু অনুরূপ বৈশিষ্ট্য ব্যবহার করেছে তবে তাদের বলা হয় -moz( মজিলার জন্য), -webkitশৈলীর পার্সিং করার সময় এটি ভূমিকাগুলি উপেক্ষা করবে :)
নিক ক্র্যাভার

35

এটির উত্তর দেওয়া হয়েছে এবং স্বীকৃত হয়েছে, তবে কেউ যদি আজও ভাবছেন যে কেন জিনিসগুলি আজ কিছুটা গোলমাল করছে, আপনাকে এটি পড়তে হবে:

http://webaim.org/blog/user-agent-string-history/

এটি কীভাবে জেকো, ওয়েবকিট এবং অন্যান্য বড় রেন্ডারিং ইঞ্জিনগুলি বিকশিত হয়েছিল এবং কী কারণে ব্যবহারকারী-এজেন্টগুলির বিশৃঙ্খলা তৈরি হয়েছিল তার বর্তমান অবস্থার কারণ কী তা একটি ভাল ধারণা দেয়।

টিএল; ডিআর এর উদ্দেশ্যে শেষ অনুচ্ছেদের উদ্ধৃতি:

এবং তারপরে গুগল ক্রোম তৈরি করেছিল এবং ক্রোম ওয়েবকিট ব্যবহার করেছিল এবং এটি সাফারির মতো ছিল এবং সাফারির জন্য তৈরি পৃষ্ঠাগুলি চেয়েছিল এবং তাই সাফারি হওয়ার ভান করে। এবং এইভাবে ক্রোম ওয়েবকিট ব্যবহার করে এবং সাফারি হওয়ার ভান করেছিল, এবং ওয়েবকিট কেএইচটিএমএল বলে প্রচার করেছিল, এবং কেএইচটিএমএল গেকো হওয়ার ভান করেছিল, এবং সমস্ত ব্রাউজারগুলি মোজিলা বলে প্রচার করেছিল Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13, এবং ক্রোম নিজেকে ডেকেছিল এবং ব্যবহারকারীর এজেন্টের স্ট্রিংটি ছিল একটি সম্পূর্ণ গণ্ডগোল, এবং অকেজো কাছাকাছি, এবং প্রত্যেকে অন্য সবাই বলে ভান করেছিল এবং বিভ্রান্তি ছড়িয়ে পড়ে।


উপরের লিঙ্কটি দেখুন, এর তথ্যবহুল এবং চূড়ান্ত অবতারণা হাসিখুশি।
অরুণ প্রসাদ ES

10

-webkit-কেবলমাত্র এমন একটি গ্রুপ যা ক্রোম, সাফারি, অপেরা এবং আইওএস ব্রাউজারগুলিতে ফিট করে। তাদের সবারই একটি সাধারণ পূর্বপুরুষ থাকে, তাই প্রায়শই তাদের ক্ষমতা / সীমাবদ্ধতা (যখন সিএসএস এবং জাভাস্ক্রিপ্ট চালানোর কথা আসে) এই গোষ্ঠীতে সীমাবদ্ধ থাকে।

একজন বিকাশকারী -webkit-কিছু কোড অনুসরণ করবে যার অর্থ কোডটি কেবলমাত্র ক্রোম, সাফারি, অপেরা এবং আইওএস ব্রাউজারগুলিতে চলবে। এখানে একটি সম্পূর্ণ তালিকা:

-webkit- (ক্রোম, সাফারি, অপেরার আরও নতুন সংস্করণ, প্রায় সমস্ত আইওএস ব্রাউজার (আইওএসের জন্য ফায়ারফক্স সহ); মূলত যে কোনও ওয়েবকিট ভিত্তিক ব্রাউজার)

-moz- (FIREFOX)

-o- (পুরাতন, প্রাক-ওয়েবকিট, অপেরা সংস্করণ)

-ms- (ইন্টারনেট এক্সপ্লোরার এবং মাইক্রোসফ্ট এজ)


9

চূড়ান্ত প্রশ্ন ... ওয়েবকিট আইই সমর্থন করে?

ধরনের। Chrome ফ্রেম পরীক্ষা করে দেখুন , এটি ইন্টারনেট এক্সপ্লোরারের জন্য একটি প্লাগইন যা এটিকে ওয়েবকিট ইঞ্জিন ব্যবহার করে makes একমাত্র উদ্দীপনাটি হ'ল আপনাকে আপনার দর্শকদের প্লাগইন ইনস্টল করতে রাজি করতে হবে।

হালনাগাদ

Chrome ফ্রেম আর রক্ষণাবেক্ষণ বা সমর্থিত হয় না ...


2
Chrome ফ্রেম আর সমর্থিত নয়।
এরিক উইলিজার

হ্যাঁ. এটি সর্বোত্তমভাবে একটি স্টপ-গ্যাপ সমাধান ছিল। 8 বছর পেরিয়ে গেছে, এখন সময় এসেছে যে উপযুক্ত উপযুক্ত ব্রাউজারগুলিকে আই.ই.
এডগারুনার

মাইক্রোসফ্ট চায় আইই চলে যেতে। পশ্চাদপটে সামঞ্জস্যের উদ্দেশ্যে এটি উইন্ডোজ 10 দিয়ে সরবরাহ করা হয়েছে।
আরজে ডনিল

8

ওয়েবকিট হ'ল একটি লেআউট ইঞ্জিন যা ওয়েব ব্রাউজারগুলিকে ওয়েব পৃষ্ঠাগুলি রেন্ডার করতে দেয়। ওয়েবকিট ইঞ্জিন উইন্ডোতে ওয়েব সামগ্রী প্রদর্শন করার জন্য ক্লাসের একটি সেট সরবরাহ করে এবং ব্রাউজারের বৈশিষ্ট্যগুলি প্রয়োগ করে যেমন ব্যবহারকারীর দ্বারা ক্লিক করা হলে নিম্নলিখিত লিঙ্কগুলি, একটি ব্যাক-ফরওয়ার্ড তালিকা পরিচালনা করা এবং সম্প্রতি দেখা পৃষ্ঠাগুলির ইতিহাস পরিচালনা করা।

ওয়েবকিটটি প্রথমে অ্যাপল এর সাফারিটির লেআউট ইঞ্জিন হিসাবে কেএইচটিএমএলটির কাঁটাচামচ হিসাবে তৈরি হয়েছিল; এটি অন্যান্য অনেক কম্পিউটিং প্ল্যাটফর্মের কাছে পোর্টেবল। এটি গুগলের ক্রোম ব্রাউজারেও ব্যবহৃত হয়।

ওয়েবকিটের ওয়েবকোর এবং জাভাস্ক্রিপ্ট কোর উপাদানগুলি জিএনইউ লেজার জেনারেল পাবলিক লাইসেন্সের অধীনে উপলব্ধ এবং বাকি ওয়েবকিট বিএসডি-স্টাইল লাইসেন্সের অধীনে উপলব্ধ।

উত্স উইকিপিডিয়া

লেআউট ইঞ্জিন সম্পর্কে আরও তথ্যের জন্য আপনি এখানে দেখতে পারেন


7

ওয়েবকিট ক্রোম এবং সাফারি দ্বারা ব্যবহৃত একটি HTML উপস্থাপনা ইঞ্জিন।

এটি প্রিফিক্স করা অনেকগুলি কাস্টম সিএসএস বৈশিষ্ট্যগুলিকে সমর্থন করে -webkit-


5

ওয়েবকিট হ'ল রেন্ডারিং ইঞ্জিন যা জনপ্রিয় ব্রাউজারগুলিতে সাফারি এবং ক্রোম, পাশাপাশি অন্যদের ব্যবহৃত হয়।


5

ওয়েবকিট হ'ল এইচটিএমএল / সিএসএস রেন্ডারিং ইঞ্জিন যা অ্যাপলের সাফারি ব্রাউজারে এবং গুগলের ক্রোমে ব্যবহৃত হয়। সিএসএস-মান ওয়েবেকিট-সহ ওয়েব-কিট-সহ উপসর্গ, তারা সাধারণত সিএসএস 3 বা অন্যান্য অ-মানক বৈশিষ্ট্যযুক্ত।

আপডেট 2 ডাব্লু 3 সি এর উত্তর দেওয়ার জন্য এই শরীর যা এই বিষয়গুলিকে মানিক করে তোলার চেষ্টা করে, তারা নিয়মগুলি লিখে, তারপরে প্রোগ্রামাররা তাদের রেন্ডারিং ইঞ্জিনটি সেই বিধিগুলি ব্যাখ্যা করার জন্য লেখেন। সুতরাং মূলত ডব্লিউ 3 সি বলেছেন ডিআইভিদের "এই ভাবে" কাজ করা উচিত ইঞ্জিন-লেখক তখন তাদের নিয়মটি লেখার জন্য সেই নিয়মটি ব্যবহার করেন, কোনও বাগ বা নিয়মের ভুল ব্যাখ্যা করা সামঞ্জস্যতার সমস্যার কারণ হয়ে দাঁড়ায়।


4

ওয়েবসাইট ডিজাইনার হিসাবে আমি যে সাধারণ সমস্যাটি দেখেছি তা হ'ল প্রচুর লোকেরা আইআই ++ ব্যবহার করে। সাধারণত কোনও বড় কথা নয়, সিএসএস ব্যতীত প্রতিটি ব্রাউজারে প্রতিটি অনুরোধ পার্স করার জন্য আমাকে একাধিক রেন্ডারিং সিনট্যাক্স যুক্ত করতে হয়। এটি খুব সুন্দর হবে যদি সিএসএসের জন্য সার্বজনীন রেন্ডারিং সেটআপ থাকে যা IE ক্রোম / এফএফ / অপেরা এবং ওয়েবকিটের মতো সহজেই পড়তে পারে। আইইর সাথে সমস্যাটি হ'ল আমি যদি সমস্ত ওয়েবসাইটগুলিকে আইই ব্যতীত প্রতিটি ব্রাউজার ব্যবহার করে দুর্দান্ত দেখতে এবং কাজ করতে না হয় তার চেয়ে উপযুক্ত সিএসএস স্টাইল এবং রেন্ডারিং ব্যবহার না করি। এটি একটি অসুখী, ডাই-হার্ড আইই গ্রাহকের জন্য তৈরি করতে পারে।

উদাহরণটি হ'ল: আমাদের বলুন যে আমার 10% এর সীমানা ব্যাসার্ধের সাথে 1px, ধূসর সীমানা প্রয়োজন। ক্রোম এবং অন্যদের জন্য, আমি ওয়েবকিট সম্পত্তি ব্যবহার করি। এখন, আই-এর জন্য, আমাকে "বর্ডার: 1 পিএক্স সলিড # E5E5E5" এবং "বর্ডার-ব্যাসার্ধ: 10%" এর সহজ পুরানো সিএসএস মানগুলি ব্যবহার করে পৃথক সিএসএস শৈলী যুক্ত করতে হবে। সমস্ত IE ব্রাউজার সংস্করণে একটি ইতিবাচক ফলাফলের সর্বদা গ্যারান্টিযুক্ত হয় না, তবে বেশিরভাগ অংশের জন্য এই পদ্ধতিটি আমার এবং আরও অনেকের পক্ষে খুব কার্যকর।


3

এটি একটি পুরানো পোস্ট হলেও, ইন্টারনেট এক্সপ্লোরারের পুরানো সংস্করণগুলির জন্য রেন্ডার করার জন্য আরও একটি পদ্ধতি রয়েছে। -উইবকিট সিএসএস বিক্রেতার উপসর্গ থাকা অবস্থায় আপনি কয়েকটি জেএস অ্যাপ্লিকেশনও ডাউনলোড করতে এবং এটিকে এইচটিএমএল এর হেডের নীচে রাখতে পারেন।

মডারিনিজার, এইচটিএমএল 5 শিব এবং রেসপন্ড.জেএস ব্যবহার করে দেখুন। এগুলি হ'ল আশ্চর্যজনক আই সামঞ্জস্যপূর্ণ পলফিল স্ক্রিপ্ট যা পলিফিলগুলি ব্যবহার করে এবং অন্যান্য সংস্থানগুলি যা আইই 9 এবং নীচে HTML5 উপাদানগুলিকে আরও ভালভাবে সরবরাহ করতে সহায়তা করবে।

এই পলিফিলগুলি ব্যবহার করতে, এগুলি রাখার জন্য এইচটিএমএল বুলিয়ান যুক্তি যুক্ত করুন, যদি ব্রাউজারটি ইচ্ছা IE সংস্করণের চেয়ে কম হয়। উদাহরণ কোডটি হ'ল:

<head>
<!-- HEAD Elements -->  
<script src="path/to/modernizr.js" type="text/javascript"></script>
<!--[if lt IE 6]>
  <script src="path/to/HTMLSiv.js" type="text/javascript">
  </script>
  <script src="path/to/respond.js" type="text/javascript">
  </script>
<![endif]-->
</head>


1

WebEnginesবিশেষত webKitএবং এর বিকাশকারীদের সম্পর্কে একটি ভাল ডকুমেন্টেশন আপনি এখানে পড়তে পারেন: ওয়েবকিট


1

ওয়েবকিট হ'ল রেন্ডারিং ইঞ্জিন যা জনপ্রিয় ব্রাউজারগুলিতে সাফারি এবং ক্রোম এবং সেইসাথে অন্যগুলিতে ব্যবহৃত হয়, প্রতিটি ব্রাউজার এইচটিএমএল / সিএসএস ওয়েব পৃষ্ঠা আঁকার জন্য একটি রেন্ডারিং ইঞ্জিন দ্বারা সমর্থিত।

আইই → ট্রাইডেন্ট (বন্ধ) এজ → এজএইচটিএমএল (ট্রাইডেন্টের ক্লিন-আপ ফর্ক) ফায়ারফক্স → গেকো অপেরা → প্রেস্টো (আর ফেব্রুয়ারী ২০১৩ সাল থেকে প্রেস্টো ব্যবহার করে না, আজকাল অপেরা = ক্রোম বিবেচনা করুন) সাফারি → ওয়েবকিট ক্রোম → ব্লিংক (ওয়েবকিটের একটি কাঁটাচামচ) ।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.