Co to jest WebKit i jak jest on powiązany z CSS?

Ostatnio widziałem pytania z tagiem „webkit”. Takie pytania zwykle są pytaniami internetowymi dotyczącymi CSS, jQuery, układów, problemów ze zgodnością przeglądarek itp.

Czym więc jest ten „zestaw” i jaki ma on związek z CSS? Zauważyłem też wiele-webkit-... właściwości w kodzie źródłowym dla różnych stron internetowych. Czy te dwie są ze sobą powiązane?

Aktualizacja

Tak więc z dotychczasowych odpowiedzi ... WebKit to silnik renderujący przeglądarki HTML / CSS dla Safari / Chrome. Czy istnieją takie silniki dla IE / Opera / Firefox i jakie są różnice, zalety i wady korzystania z jednego nad drugim? Czy mogę na przykład korzystać z funkcji WebKit w przeglądarce Firefox?

Ostateczne pytanie ... Czy WebKit jest obsługiwany przez IE?

Aktualizacja 2

Wszystkie główne przeglądarki używają różnych silników renderujących. Wydaje mi się, że to duży powód, dla którego występuje tak wiele problemów ze zgodnością w różnych przeglądarkach!

Czy istnieje jakiś projekt lub przejście do standardowego silnika renderowania, z którego będą korzystać WSZYSTKIE przeglądarki? Czy HTML5 położy kres problemom ze zgodnością w różnych przeglądarkach?

Aktualizacja: Najwyraźniej WebKit to silnik renderujący przeglądarki HTML / CSS dla Safari / Chrome. Czy istnieją takie silniki dla IE / Opera / Firefox i jakie są różnice, zalety i wady korzystania z jednego nad drugim? Czy mogę na przykład korzystać z funkcji WebKit w przeglądarce Firefox?

Każda przeglądarka jest wspierana przez silnik renderujący do rysowania strony internetowej HTML / CSS.

• IE → Trójząb (wycofany)
• Edge → EdgeHTML (widelec do czyszczenia Trident)(Edge zmieniono na Blink w 2019 r.)
• Firefox → Gecko
• Opera → Presto(nie używa już Presto od lutego 2013, rozważ Opera = Chrome, dlatego Blink obecnie)
• Safari → WebKit
• Chrome → Blink (rozwidlenie Webkita ).

Zobacz Porównanie silników przeglądarki internetowej, aby uzyskać listę porównań w różnych obszarach.

Ostateczne pytanie ... czy WebKit jest obsługiwany przez IE?

Nie natywnie.

Uzupełnienie tego, co powiedział @KennyTM :

• TO ZNACZY
  • Silnik: trójząb
  • Prefiks CSS: -ms
• Krawędź
  • Silnik: EdgeHTML → Blink ³
  • Prefiks CSS: -ms
• Firefox
  • Silnik: Gecko
  • Prefiks CSS: -moz
• Opera
  • Silnik: Presto → Mrugnięcie ¹
  • Prefiks CSS: -o(Presto) i -webkit(Blink)
• Safari
  • Silnik: WebKit
  • Prefiks CSS: -webkit
• Chrom
  • Silnik: WebKit → Blink ²
  • Prefiks CSS: -webkit

¹⁾ W dniu 12 lutego 2013 r. Opera (wersja 15+) ogłasza, że odchodzą od własnego silnika Presto do WebKit o nazwie Blink .

²⁾ 3 kwietnia 2013 r. Google (wersja Chrome 28+) ogłasza, że będzie korzystać z silnika Blink opartego na WebKit .

³⁾ 6 grudnia 2018 r. Microsoft (Microsoft Edge 79+ stabilny) ogłasza, że zamierza korzystać z silnika Blink opartego na WebKit .

Webkit to silnik renderowania przeglądarki internetowej używany przez Safari i Chrome (między innymi te popularne).

-webkitPrefiks na selektorów CSS są właściwości, które tylko silnik ten jest przeznaczony do procesu, bardzo podobne do -mozwłaściwości. Wielu z nas ma nadzieję, że to zniknie, na przykład -webkit-border-radiuszostanie zastąpione przez standard border-radiusi nie będziesz potrzebował wielu reguł dla tej samej rzeczy dla wielu przeglądarek. Jest to naprawdę wynik funkcji „wstępnej specyfikacji”, które nie mają zakłócać standardowej wersji, jeśli chodzi o to.

Dla twojej aktualizacji: ... nie, to nie jest tak naprawdę związane z IE, IE przynajmniej przed 9 używa innego silnika renderującego o nazwie Trident .

Odpowiedź została zaakceptowana i zaakceptowana, ale jeśli ktoś nadal zastanawia się, dlaczego dzisiaj są trochę pomieszane, musisz przeczytać:

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

Daje dobre wyobrażenie o tym, jak ewoluowały gecko, webkit i inne główne mechanizmy renderujące oraz co doprowadziło do obecnego stanu pomieszanych ciągów użytkownika-agenta.

Cytując ostatni akapit dla celów TL; DR:

A potem Google zbudował Chrome, a Chrome użył Webkit, i to było jak Safari, i chciał stron zbudowanych dla Safari, a więc udawał Safari. W ten sposób Chrome używał WebKit i udawał Safari, a WebKit udawał KHTML, a KHTML udawał Gecko, a wszystkie przeglądarki udawały Mozillę, a Chrome nazywał się 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, a ciąg agenta użytkownika był kompletnym bałaganem, i prawie bezużyteczne, a wszyscy udawali, że są wszyscy inni, i zamieszanie się narastało.

-webkit-to po prostu grupa, do której pasują przeglądarki Chrome, Safari, Opera i iOS. Wszystkie mają wspólnego przodka, więc często ich możliwości / ograniczenia (jeśli chodzi o uruchamianie CSS i Javascript) są ograniczone do grupy.

Deweloper umieści -webkit-następujący kod, co oznacza, że ​​kod będzie działał tylko w przeglądarkach Chrome, Safari, Opera i iOS. Oto pełna lista:

-webkit- (Chrome, Safari, nowsze wersje Opery, prawie wszystkie przeglądarki iOS (w tym Firefox na iOS); w zasadzie dowolna przeglądarka oparta na WebKit)

-moz- (Firefox)

-o- (Stary, wcześniejszy niż WebKit, wersje Opery)

-ms- (Internet Explorer i Microsoft Edge)

Ostateczne pytanie ... Czy WebKit jest obsługiwany przez IE?

Rodzaj. Sprawdź Chrome Frame , jest to wtyczka do przeglądarki Internet Explorer, która umożliwia korzystanie z silnika Webkit. Jedynym dziwactwem jest to, że musisz przekonać odwiedzających do zainstalowania wtyczki.

Aktualizacja

Chrome Frame nie jest już obsługiwany ani obsługiwany…

WebKit to silnik układu zaprojektowany w celu umożliwienia przeglądarkom internetowym renderowania stron internetowych. Silnik WebKit zapewnia zestaw klas do wyświetlania treści internetowych w oknach i implementuje funkcje przeglądarki, takie jak klikanie linków po kliknięciu przez użytkownika, zarządzanie listą wstecz i zarządzanie ostatnio odwiedzanymi stronami.

WebKit został pierwotnie stworzony jako rozwidlenie KHTML jako silnika układu dla Safari Apple'a; jest przenośny na wiele innych platform komputerowych. Jest również używany w przeglądarce Google Chrome.

Komponenty WebCore i JavaScriptCore WebKit są dostępne na licencji GNU Lesser General Public License, a reszta WebKit jest dostępna na licencji w stylu BSD.

Źródło Wikipedia

Więcej informacji o silnikach układu można znaleźć tutaj

Webkit to silnik renderujący HTML używany w Chrome i Safari.

Obsługuje wiele niestandardowych właściwości CSS, które są poprzedzone przez -webkit-.

Webkit to silnik renderujący używany w popularnych przeglądarkach Safari i Chrome, a także w innych.

Webkit to silnik renderowania html / css używany w przeglądarce Safari firmy Apple oraz w przeglądarce Google Chrome. Przedrostki wartości css z opcją -webkit- są specyficzne dla webkita, zwykle są to CSS3 lub inne niestandardowe funkcje.

aby odpowiedzieć na aktualizację 2 w3c to ciało, które próbuje standaryzować te rzeczy, piszą reguły, a następnie programiści piszą swój silnik renderujący, aby interpretować te reguły. Więc w zasadzie w3c mówi, że DIV powinny działać „w ten sposób”, piszący silnik używa następnie tej reguły do ​​pisania kodu, wszelkie błędy lub błędne interpretacje reguł powodują problemy ze zgodnością.

Częstym problemem, na który natknąłem się jako projektant strony, jest to, że wiele osób korzysta z IE6 +. Zwykle nie jest to wielka sprawa, z wyjątkiem CSS. Muszę dodać wiele składni renderowania, aby przeanalizować każde żądanie dla każdej przeglądarki. Byłoby bardzo miło, gdyby istniała uniwersalna konfiguracja renderowania dla CSS, którą IE może odczytać tak łatwo, jak Chrome / FF / Opera i webkit. Problem z IE polega na tym, że jeśli NIE używam WSZYSTKICH właściwych stylów CSS i renderowania, to moje strony wyglądają i działają świetnie z każdą przeglądarką oprócz IE. Może to być niezadowolonym, zagorzałym klientem IE.

Przykład jest taki: powiedzmy, że potrzebuję 1-szarej szarej ramki o promieniu 10%. W przypadku Chrome i innych korzystam z właściwości webkit. Teraz dla IE muszę dodać osobne style CSS, używając prostych starych wartości CSS „border: 1px solid # E5E5E5” i „border-radius: 10%”. Pozytywny wynik nie zawsze jest gwarantowany we wszystkich wersjach przeglądarki IE, ale w przeważającej części ta metoda działa dobrze dla mnie i wielu innych.

Mimo że jest to starszy post, istnieje również inna metoda renderowania dla starszych wersji Internet Explorera. -webkit będąc prefiksem dostawcy CSS, możesz również pobrać kilka aplikacji JS i umieścić je na dole HEAD HTML.

Spróbuj użyć Modernizr, HTML5 Shiv i Respond.js. Są to niesamowite skrypty wypełniania kompatybilne z IE, które używają wypełniania i inne zasoby, które pomogą lepiej renderować elementy HTML5 w IE9 i poniżej.

Aby użyć tych wypełniania, po prostu dodaj logikę logiczną HTML, aby je umieścić, JEŻELI przeglądarka jest mniejsza niż pożądana wersja IE. Przykładowy kod to:

<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>

Dobra dokumentacja na temat WebEnginesszczególnie webKiti jej twórców można przeczytać na: WebKit

Webkit to silnik renderujący używany w popularnych przeglądarkach Safari i Chrome, a także innych. Każda przeglądarka jest wspierana przez silnik renderujący do rysowania strony internetowej HTML / CSS.

IE → Trident (nie produkowane) Edge → EdgeHTML (widelec do czyszczenia Trident) Firefox → Gecko Opera → Presto (już nie używa Presto od lutego 2013, rozważ Opera = Chrome obecnie) Safari → WebKit Chrome → Blink (widelec WebKit) .