Що таке WebKit і як це пов'язано з CSS?

Зовсім недавно я бачив питання з тегом "webkit". Такі питання, як правило, є веб-питаннями, що стосуються CSS, jQuery, макетів, проблем сумісності між браузерами тощо ...

Отже, що це за "вебкіт" і як він стосується CSS? Я також помітив багато -webkit-...властивостей у вихідному коді для різних веб-сайтів. Ці два пов'язані?

Оновлення

Отже, з відповідей поки що ... WebKit - це механізм візуалізації веб-браузерів HTML / CSS для Safari / Chrome. Чи є такі двигуни для IE / Opera / Firefox і які відмінності, плюси та мінуси використання одного над іншим? Чи можу я, наприклад, використовувати функції WebKit у Firefox?

Остаточне питання ... Чи підтримується WebKit IE?

Оновлення 2

Усі основні браузери використовують різні механізми візуалізації. Я думаю, це велика причина, чому існує так багато проблем сумісності між браузерами!

Отже, чи є якийсь проект чи рух до стандартного механізму візуалізації, який використовуватимуть ВСІ браузери? Чи припинить HTML5 проблеми з сумісністю між веб-переглядачами?

Оновлення: Очевидно, WebKit - це система для відображення веб-браузерів HTML / CSS для Safari / Chrome. Чи є такі двигуни для IE / Opera / Firefox і які відмінності, плюси та мінуси використання одного над іншим? Чи можу я, наприклад, використовувати функції WebKit у Firefox?

Кожен браузер підтримується механізмом візуалізації для малювання веб-сторінки HTML / CSS.

• IE → Тризуб (припинено)
• Край → EdgeHTML (прибиральна вилка тризуба)(Edge перейшов на Blink у 2019 році)
• Firefox → Gecko
• Опера → Престо(з лютого 2013 більше не використовує Presto, вважай Opera = Chrome, тому блимати зараз)
• Safari → WebKit
• Chrome → Blink (вилка Webkit ).

Див. Порівняння двигунів веб-браузерів для порівняння в різних областях.

Остаточне питання ... чи підтримує WebKit IE?

Не рідно.

Доповнення до того, що сказав @KennyTM :

• IE
  • Двигун: Тризуб
  • CSS-префікс: -ms
• Край
  • Двигун: EdgeHTML → Blink ³
  • CSS-префікс: -ms
• Firefox
  • Двигун: Gecko
  • CSS-префікс: -moz
• Опера
  • Двигун: Presto → Blink ¹
  • CSS-префікс: -o(Presto) та -webkit(Blink)
• Сафарі
  • Двигун: WebKit
  • CSS-префікс: -webkit
• Хром
  • Двигун: WebKit → Blink ²
  • CSS-префікс: -webkit

¹⁾ 12 лютого 2013 року Opera (версія 15+) оголошує, що вони переходять від власного двигуна Presto до WebKit на ім'я Blink .

²⁾ 3 квітня 2013 року Google (версія Chrome 28+) оголошує, що збирається використовувати механізм Blink на основі WebKit .

³⁾ 6 грудня 2018 року Microsoft (Microsoft Edge 79+ стабільний) оголошує, що збирається використовувати двигун Blink на основі WebKit .

Webkit - це система візуалізації веб-браузерів, яка використовується Safari та Chrome (серед інших, але це популярні).

-webkitПрефікс CSS селекторів властивість , які тільки цей двигун призначений для процесу, дуже схожого на -mozвластивості. Багато хто з нас сподіваються, що це пройде, наприклад -webkit-border-radius, його замінить стандарт, border-radiusі вам не знадобиться кілька правил для однієї і тієї ж речі для кількох браузерів. Це дійсно результат функцій "попередньої специфікації", які не повинні перешкоджати стандартній версії, коли вона з'являється.

Для вашого оновлення: ... ні, це не пов’язано з IE насправді, IE принаймні до 9 використовує інший механізм візуалізації, який називається Trident .

На це відповіли і прийняли, але якщо хтось все ще цікавиться, чому сьогодні речі дещо заплутані, вам доведеться прочитати це:

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

Це дає гарне уявлення про те, як розвивалися гекони, вебкіти та інші основні двигуни візуалізації та що призвело до поточного стану заплутаних рядків користувацьких агентів.

Цитуючи останній абзац для цілей TL; DR:

І тоді Google побудував Chrome, а Chrome використовував Webkit, і це було схоже на Safari, і хотіли, щоб сторінки були створені для Safari, і тому прикинувся Safari. І таким чином Chrome використовував WebKit і прикидався Safari, а WebKit прикидався KHTML, а KHTML прикидався Gecko, і всі браузери прикидалися Mozilla, а Chrome називав себе 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, а рядок користувацького агента був повним безладом, і майже марний, і всі прикидалися всіма іншими, і розгубленість рясніла.

-webkit-це просто група, до якої вписуються браузери Chrome, Safari, Opera та iOS. Всі вони мають спільного предка, тому часто їх можливості / обмеження (якщо мова йде про запуск CSS та Javascript) обмежуються групою.

Розробник розміщуватиме -webkit-якийсь код, тобто код працюватиме лише в браузерах Chrome, Safari, Opera та iOS. Ось повний список:

-webkit- (Chrome, Safari, новіші версії Opera, майже всі браузери iOS (включаючи Firefox для iOS); в основному, будь-який веб-браузер на базі WebKit)

-moz- (Firefox)

-o- (Стара, pre-WebKit, версії Opera)

-ms- (Internet Explorer і Microsoft Edge)

Остаточне питання ... Чи підтримується WebKit IE?

Типу. Ознайомтеся з Chrome Frame , це плагін для Internet Explorer, завдяки якому він використовує двигун Webkit. Єдина химерність полягає в тому, що вам доведеться переконати своїх відвідувачів встановити плагін.

Оновлення

Chrome Frame більше не підтримується і не підтримується ...

WebKit - це система компонування, призначена для того, щоб веб-браузери могли відображати веб-сторінки. Двигун WebKit пропонує набір класів для відображення веб-вмісту у Windows, а також реалізує функції веб-переглядача, такі як наступні посилання при натисканні користувачем, керування списком назад та керування історією нещодавно відвіданих сторінок.

WebKit спочатку був створений як вилка KHTML як двигун компонування для Safari від Apple; він є портативним для багатьох інших обчислювальних платформ. Він також використовується в браузері Chrome Chrome.

Компоненти WebCit WebCore та JavaScriptCore доступні під ліцензією GNU Lesser General Public, а решта WebKit доступна під ліцензією стилю BSD.

Джерело Вікіпедія

Для отримання додаткової інформації про верстки двигунів ви можете подивитися тут

Webkit - це механізм візуалізації HTML, який використовують Chrome та Safari.

Він підтримує ряд спеціальних властивостей CSS, які мають префікс -webkit-.

Webkit - це система візуалізації, яка використовується в популярних браузерах Safari та Chrome, а також інших.

Webkit - це механізм візуалізації html / css, який використовується в браузері Safari Apple і в Chrome Google. префікси значень css з -webkit- є специфічними для webkit, зазвичай це CSS3 або інші нестандартні функції.

щоб відповісти на оновлення 2 w3c - це орган, який намагається стандартизувати ці речі, вони записують правила, потім програмісти записують свій механізм візуалізації для інтерпретації цих правил. Таким чином, w3c каже, що DIV повинні працювати "таким чином", тоді розробник двигунів використовує це правило для написання свого коду, будь-які помилки або неправильні тлумачення правил викликають проблеми сумісності.

Поширена проблема, з якою я зіткнувся як дизайнер веб-сайтів, полягає в тому, що багато людей використовують IE6 +. Зазвичай, нічого не буває, за винятком CSS, я повинен додати декілька синтаксисів візуалізації 'для розбору кожного запиту за кожен браузер. Було б дуже приємно, якби була універсальна настройка візуалізації для CSS, яку IE може читати так само легко, як Chrome / FF / Opera та webkit. Проблема з IE полягає в тому, що якщо я НЕ використовую ВСІ належні стилі CSS та візуалізації, то мої веб-сайти виглядають та працюють чудово за допомогою кожного браузера, крім IE. Це може зробити для нещасного, важкого клієнта IE.

Приклад такий: Скажімо, мені потрібна сіра рамка в 1 піксель, радіус межі 10%. Для Chrome та інших користувачів я використовую властивість webkit. Тепер для IE я повинен додати окремі стилі CSS, використовуючи прості старі значення CSS: "border: 1px solid # E5E5E5" та "border-radius: 10%". Позитивний результат не завжди гарантується для всіх версій браузера IE, але здебільшого цей метод працює добре для мене та багатьох інших.

Незважаючи на те, що це старіша публікація, існує також інший метод рендерингу для старих версій Internet Explorer. -webkit, будучи префіксом постачальника CSS, ви також можете завантажити декілька програм JS і помістити їх у нижню частину HTML-HEAD.

Спробуйте використовувати Modernizr, HTML5 Shiv та Respond.js. Це дивовижні сумісні з IE скрипти для полізаповнення, які використовують поліфауни та інші ресурси, які допоможуть краще відтворити елементи HTML5 в IE9 та нижче.

Щоб використовувати ці поліфауни, просто додайте логічну HTML логіку для їх розміщення, ЯКЩО браузер менший за бажання 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>

Гарну документацію про WebEnginesособливості webKitта її розробників ви можете прочитати на веб-сайті: WebKit

Webkit - це система візуалізації, яка використовується в популярних браузерах Safari та Chrome, а також інших. Кожен браузер підтримується механізмом візуалізації для малювання веб-сторінки HTML / CSS.

IE → Тризуб (припинено) Edge → EdgeHTML (очисні вилки Trident) Firefox → Gecko Opera → Presto (більше не використовується Presto з лютого 2013 року, вважайте Opera = Chrome сьогодні) Safari → WebKit Chrome → Blink (роздріб WebKit) .