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

277

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?

Hristo
źródło
1
Ostatnie pytanie brzmi: „Czy IE może zostać poproszony o renderowanie rzeczy, które nie zostały zaprogramowane do renderowania?”, A odpowiedź brzmi „nie”
Gareth
silnik renderujący firefox nazywa się gekon. tzn. wykorzystuje własny silnik zastępczy.
troelskn
@Gareth ... dzięki. właśnie tego chciałem NIE słyszeć :) W tym przypadku mam nadzieję, że IE wkrótce zacznie być kompatybilny ... i że ludzie przestaną używać IE6!
Hristo,
6
Sprawdź css3pie.com, aby zapoznać się z niektórymi funkcjami pakietu internetowego dodanymi do IE za pomocą CSS.
Kenoyer130,
WebKit to najgorszy silnik renderowania HTML w historii, bez żadnych ograniczeń. Nieźle znaczy źle, cytując NWA, ale źle znaczy dobrze.
Dagg Nabbit,

Odpowiedzi:

168

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.

kennytm
źródło
.. dzięki za zajęcie się moją aktualizacją. Więc jeśli IE nie obsługuje WebKit i wiem, że nie obsługuje -moz-właściwości ... jak mogę sprawić, by IE akceptował style CSS3?
Hristo,
@Hristo: W zależności od stylu, którego potrzebujesz.
kennytm,
Nie miałem na myśli żadnego szczególnego ... Po prostu wiem, że IE jest do bani, jeśli chodzi o kompatybilność z różnymi przeglądarkami i zastanawiałem się, czy WebKit to sposób na rozwiązanie tego problemu.
Hristo,
3
powinien zostać zaktualizowany. Twórcy Chrome mają rozwidlony webkit, a opera nie używa już presto
Richard
1
EdgeHTML został teraz również wycofany.
DreamTeK,
115

Uzupełnienie tego, co powiedział @KennyTM :

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

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

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

jerone
źródło
2
.. to świetna informacja! Czy więc różne silniki renderujące zignorowałyby te prefiksy? tj Byłoby Firefox ignorować -msie, -o, -webkit; Byłoby Webkit ignorować -moz, -o, -msie; itp...?
Hristo,
1
@Hristo Tak, nie rozpoznaje żadnego z nich jako prawidłowego CSS, więc je ignoruje
JKirchartz
1
JKirchartz jest poprawny. Inne przeglądarki zignorują się nawzajem css-prefix.
jerone
2
A WebKit, do którego Opera się przenosi, to odmiana Chromium, która sama zamienia się w Blink.
BoltClock
41

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 .

Nick Craver
źródło
2
Więc może -webkit-być używany w przeglądarce Firefox do zaawansowanego renderowania funkcji CSS3?
Hristo,
1
Nie, Firefox używa silnika renderującego o nazwie Gecko
Gareth
2
@Hristo - Firefox używa niektórych podobnych właściwości, ale są one nazywane -moz(dla Mozilli), będą ignorować -webkitrole podczas analizowania stylów :)
Nick Craver
35

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.

CodeExpress
źródło
Odwiedź powyższy link, jego kulminacyjny i końcowy punkt kulminacyjny jest przezabawny.
Arun Prasad ES,
10

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

Tycholiz
źródło
9

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…

edgerunner
źródło
2
Chrome Frame nie jest już obsługiwany.
Eric Willigers
Tak. W najlepszym razie było to rozwiązanie stop-gap. Po 8 latach nadszedł czas, aby IE ustępowało miejsca odpowiednim przeglądarkom zgodnym z wymaganiami.
edgerunner
Microsoft chce odejść IE. Jest on dostarczany z systemem Windows 10 w celu zapewnienia kompatybilności wstecznej.
RJ Dunnill,
8

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

Sotiris
źródło
7

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

SLaks
źródło
5

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

rekurencyjny
źródło
5

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

JKirchartz
źródło
4

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.

AJADMIN.COM
źródło
3

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>

CoyoteCMS
źródło
1

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

hamidfzm
źródło
1

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

Nabeel Khan
źródło