精华内容
参与话题
问答
  • webkit

    2019-03-14 17:28:06
    1. display: -webkit-box; 使用flexbox 布局 -webkit-box-pack: center; 实现容器内容垂直居中 -webkit-box-align: center; 实现容器内的内容水平居中 -webkit-box-orient: vertical; 容器内的元素垂直排列 2.-...

    1.  display: -webkit-box;  使用flexbox 布局

      -webkit-box-pack: center;  实现容器内容垂直居中

      -webkit-box-align: center;  实现容器内的内容水平居中

       -webkit-box-orient: vertical; 容器内的元素垂直排列

    2.-webkit-box 与 -webkit-flex 的差异

    使用-webkit-box 的时候   -webkit-flex-wrap 属性不生效,必须使用-webkit-flex

    正确的css覆盖 顺序是

      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    --------------------- 
     

    展开全文
  • Webkit

    2016-05-26 12:08:00
    对一些开发者而言,WebKit就是一个黑盒子。丢进去HTML、CSS、JS等一连串的东西,而WebKit就能变魔术一般显示出一个很棒的网页出来。实际上,正我的同事IlyaGroriks提到的:  WebKit不但是白盒,而且是一个开放的...


    对一些开发者而言,WebKit就是一个黑盒子。丢进去HTML、CSS、JS等一连串的东西,而WebKit就能变魔术一般显示出一个很棒的网页出来。实际上,正我的同事IlyaGroriks提到的:

      WebKit不但是白盒,而且是一个开放的白盒。

    让我们花点时间来理解以下这些问题:

    什么是WebKit? 
    什么不是
    WebKit? 
    浏览器是如何使用
    WebKit的? 
    为什么
    WebKit分支各不相同?

    最近连Opera都转到WebKit平台上。下面的内容可以让你能够识别浏览器间的差异,去到合适的tracker上报Bug, 同时可以了解如何更有效的在各个浏览器上开发。

     

    标准的浏览器组件

    以下是现代浏览器的一些组件:

    ·        解析(Parsing) (HTML, XML, CSS, JavaScript)

    ·        排版(Layout)

    ·        渲染(Text and graphics rendering)

    ·        图片解码(Image decoding)

    ·        图形加速(GPU interaction)

    ·        网络访问(Network access)

    ·        硬件加速(Hardware acceleration)

    只有前两项是被所有WebKit浏览器所共享的。其它的部分由不同的WebKit ports来实现。什么意思?

     

    WebKit的移植版本(Ports)

    现在有很多WebKit的移植版本,先看一下WebKit hacker(也是SenchaDirectorAriya Hidayat的解释:

    WebKit最为公认的参考是Apple自己运行在Mac OS X上的分支,也是最初和原装的WebKit库。在Mac OS X上不,围绕着CoreFundation等不同的原生系统库实现出了不同的接口。比如让WebKit之所以知道如何绘制出一个带有圆角的flat button,其实最终是由CoreGraphics负责的。


    在Mac移值版本上使用的是CoreGraphics(CG),Mac上的Chrome则使用的是Skia

     WebKit不断地被移植到不同的平台上,包括桌面版本和Mobile版本,它们通常被称为一从此WebKit portApple自己也基于CoreFoundation库的Windows版本移植了一份Windows版本的WebKit


    不过Windows版的Safari已经死去.


    除此之外,还有许多其它的ports (完整列表)Google创建并维护着Chromium port还有基于Gtk+WebKitGtkNokia (实际上是Trolltech)维护着Qt port,就是知名的QtWebKitmodule.

     

    WebKit ports介绍

    ·        Safari

           o   SafariOS X版本Windows版本是两个不同的移植版本。

           o   WebKitnightly是基于SafariMac OS版本的。稍后详述……

    ·        Mobile Safari

           o   是专属维护的分支,但随后就成了主流版本

           o   Chrome on iOS(使用的是Apple提供的 WebView,随后会说明它们的不同部分)

    ·        Chrome (Chromium)

           o   Chrome onAndroid (直接使用Chromiumport)

           o   Yandex Browser, 360 Browser, Sogou Browser使用Chromium,还有Opera.

    ·        Android Browser

           o   紧跟WebKit的最新版本。

    ·        更多的移值版本: Amazon Silk, Dolphin, Blackberry, QtWebKit,WebKitGTK+, EFL port (Tizen), wxWebKit, WebKitWinCE等。

     

    不同port的关注不同。Mac port关于于将浏览器从系统中分离,引入Obj-CC++的绑定(binding)以方便在应用中使用WebKit渲染引擎。Chromium则纯粹关注于浏览器。QtWebKit则为其跨平台应用提供运行时或渲染引擎。

     

    WebKit浏览器的共性

    所有WebKit ports的共性包括以下部分。(这段作者写了多次,每次都有Chrome工程加以纠正,各项后面的斜体部分。)

    1.      WebKit用相同的方式解析HTML目前只有Chromium支持了多线程的HTML解析(threaded HTMLparsing) .

    2.      使用相同的方式构建DOM Tree. 实际上只有Chromium支持Shadow DOM

    3.      WebKit都会创建一个window 对象和document 对象 不过可用的属性和建构函数可以通过功能选项来控制。

    4.      CSS解析。尽管如此,还是应当让你的CSS遵循CSSOM标准。 Chrome接受-webkit-前缀,相对的Apple和其它ports则接受-khtml- –apple-前缀.

    5.      排版(Layout)和定位(positioning) WebKit包括了Sub-pixel排版和对比排版(saturated layout) 算法但每个port的实现是不同的。

    6.      基础是相同的。

     

    就像FlickrGithub透过flags来指定实现的功能,WebKit允许通过指定编译期功能选项(WebKit’scompile-time Feature Flags)来启用和禁用一系列的功能。还有运行时标志来管理一些功能,通过命令行(command lineswitches (Chromium’s here)  或配置的方式(about:flags)指定。

     

    WebKit port共性列表

    ·        DOM, window, document

    ·        CSSOM

    ·        CSS解析, property/value处理

             o   sans vendorprefix handling

    ·        HTML parsing and DOM construction

             o   same if wesuspended belief in Web Components

    ·        排版与定位

             o   Flexbox,Floats, block formatting contexts… all shared

    ·        Chrome开发工具,也称为WebKit Inspector.

             o   去年四月开始,Safari开始使用自己的Safari Inspector.

    ·        部分功能,如Content Editable, Push State, File API,大部分SVG API, CSS Transform math, Web Audio API, Local Storage

             o   后台(backend)并不相同.比如不同的port会为local storageWeb Audio API使用不同的实现方法。

    ·        其它一些功能和特性

     

    WebKit ports不同的部分

    ·        GPU的运用

              o   3D Transforms

              o   WebGL

              o   Video解码(decoding)

    ·        2D绘制

              o   Anti-aliasing方法

              o   SVG & CSS梯度渲染(gradientrendering)

    ·        文本渲染和断字处理(rendering & hyphenation)

    ·        Network stack (SPDY,预读(pre-rendering), WebSocket transport)

    ·        JavaScript引擎

              o   WebKit中的JSC(也支持V8),以及Chrome中的V8

    ·        表格(forms)的渲染

    ·        音频和视频元素的行为 (包括codec的支持)

    ·        图片解码(Image decoding)

    ·        导航(Navigating back/forward)

              o   pushState()的导航部分

    ·        SSL特性(Strict Transport SecurityPublic Key Pins)

     

    下图是2D graphics 在不同port中的依赖关系,几乎是各自使用了完全不同的库来实现绘制操作:

           

    举一个更细节的例子,一个刚被引入的特性CSS.supports()只有winwincairo两个移植版本没有支持,因为它们并没有启用css3特性。

     

    简单地说共享的组件就是WebCore。它其实就是通常意义上大家所说的WebKit,一个排版、渲染引擎,同时是HTMLSVG解析库。而WebKitWebCoreports之间的绑定层(bindinglayer),平时的交流并不太在意它。

    如下图所示:


    WebKit中的许多元件是可以替换的 (上图中的灰色部分)


    比如WebKit的默认JavaScript引擎JSC(JavaScriptCore,当由KHTML开始创建WebKit的同时基于KDEKJS实现而来),Chromium portV8替换,并用独特的DOM bindings(关于DOM Binding可以参考这里)


    字体和文字的渲染也严重依赖于平台。WebKit中有两种不同Text Path: Fast and Complex。每一项都需要平台(port-side)支持。Fast只需要知道如何贴上位图轮廓(blit glyphs)就可以了,WebKit会为平台准备数据。而Complex则完全依赖于平台去处理,它仅仅请求:”请画出这个

    “WebKit就像一个三明治,而 Chromium更像一个墨西哥玉米卷(taco) Dimitri Glazkov, ChromeWebKit hacker. Web ComponentsShadow DOM的拥护者。

     (为什么是taco,看这里就可以了.)


    下表中列出了5WebKit port的块图,了解一下它们之间的异同。

    -                   

    Chrome (OS X)

    Safari (OS X)

    QtWebKit

    Android Browser

    Chrome for iOS

    Rendering

    Skia

    CoreGraphics

    QtGui

    Android stack/Skia

    CoreGraphics

    Networking

    Chromium network stack

    CFNetwork

    QtNetwork

    Fork of Chromium’s network stack

    Chromium stack

    Fonts

    CoreText via Skia

    CoreText

    Qt internals

    Android stack

    CoreText

    JavaScript

    V8

    JavaScriptCore

    JSC (V8 is used elsewhere in Qt)

    V8

    JavaScriptCore (without JITting) *

    注意iOS上的Chrome使用的是系统控件UIWebView,因此它只能使用和Mobile Safari一样的渲染引擎(rendering layers),以及JavaScriptCore和单进程模型(single-process model)。当然  Chromium还是有它的应用的 诸如网络层(network layer),同步和书签的基础组件(sync and bookmarks infrastructure), Omnibox,metrics及崩溃报告(crashreporting). (之所值得这样做,是因为 JavaScript很少会成为移动端的瓶颈,而带有JIT的编译器的影响也会很小。)

     

    WebKit浏览器间差异之大,何去何从?

    大可不必!WebKit中提供了LayoutTest提供了大量的测试用例(28,000),不但针对已存在的功能,还包括回归测试。事实上,无论你何时发现了一些新奇的DOM/CSS/HTML5特性,LayoutTest通常已经提供了一个简化版的演示。(参考:深入分析LayoutTest)

    另外W3C也正增加其在页面一致性测试上的投入。这表示不同的WebKit ports和所有浏览器会针对相同的页面进行测试,将带来更少的私有特性(quirks)和更多可以共同操作的页面。

     

    Opera将如何转换?

    Robert NymanRob Hawkes分析过了,但值得注意的是Opera会采用Chromium。这表示WebGL, Canvas, HTML5 forms, 2D graphics等实现会和Chrome一样。相同的APIst和相同的后台(backends)实现。所以OperaChromium-based, OperaChrome会保持同步兼容。

     

    并且所有Opera浏览器都会采用Chromium,甚至包括Opera Mini,会将原本Presto实现的在服务器端的渲染方式放弃,转而使用Chromium提供的渲染功能。

     

    什么是WebKit Nightly

    它是WebKitMac Port,和Safari内部运行的版本是一致的(除了一小部分的基础库会被替换掉)。所以它的行为和功能是和Safari一致的。你也可以这样理解WebKit Nightly就是Safari,Chromium就是Chrome

     

    Chrome Canary 也会与WebKit保持像是一天内的代码同步。

     

    扩展阅读:

    ·        WebKitinternals technical articles | webkit.org

    ·        WebKit: AnObjective View | Robert Nyman & Rob Hawkes

    ·        Your webkitport is special (just like every other port) | Ariya Hidayat

    ·        GettingStarted With the WebKit Layout Code | Adobe Web Platform Blog

    ·        WebKitDocumentation Overview | Arun Patole

    ·        Rendering inWebKit, by Eric Seidel | YouTube

    ·        Webperformance for the curious | Ilya Grigorik

     

    展开全文
  • WebKit

    2012-09-06 09:58:10
    WebKit 是一个开源的浏览器引擎,与之相对应的引擎有Gecko(MozillaFirefox 等使用)和Trident(也称MSHTML,IE使用)。同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称,主要用于Safari,Dashboard,Mail和...
    WebKit 是一个开源浏览器引擎,与之相对应的引擎有Gecko(MozillaFirefox 等使用)和Trident(也称MSHTMLIE使用)。同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称,主要用于SafariDashboardMail和其他一些Mac OS X 程序。
    WebKit 前身是 KDE 小组的 KHTML,WebKit 所包含的 WebCore 排版引擎和 JSCore引擎来自于 KDEKHTML 和KJS,当年苹果比较了 Gecko 和 KHTML 后,仍然选择了后者,就因为它拥有清晰的源码结构、极快的渲染速度。Apple将 KHTML发扬光大,推出了装备 KHTML 改进型 WebKit 引擎的浏览器 Safari。

    简介

    Webkit也是自由软件,同时开放源代码。WebKit的优势在于高效稳定,兼容性好,且源码结构清晰,易于维护。尽管Webkit内核是个非常好的网页解释机制,但是由于微软把IE捆绑在Windows里,导致许多网站都是按照IE来架设的,很多网站不兼容Webkit内核,比如登录界面、网银等网页均不可使用Webkit内核。目前来讲,Webkit还不能取代IE内核。WebKit内核在手机上的应用也十分广泛,例如 Google 的手机 Gphone、 Apple 的 iPhone, Nokia’s Series60 browser 等所使用的 Browser 内核引擎,都是基于 WebKit。

    引擎分类

    现在浏览器的内核引擎,基本上是四分天下:   
    Trident: IE 以Trident 作为内核引擎;   
    Gecko: Firefox 是基于 Gecko 开发;   
    WebKit: Safari, Google Chrome,搜狗浏览器的高速内核,傲游3 基于 Webkit 开发。  
    Presto: Opera的内核,但由于市场选择问题,主要应用在手机平台--Opera mini

    应用平台

      在应用于Mac Os上的Safari之后,Webkit很快被广泛地移植到其他系统平台:   
    iOS:   2007年6月29日,iPhone上市,WebKit进入iPhone OS平台,而且立即成为iPhoneOS平台独一无二的排版引擎。   
    Android:
      Google 开发的手机操作系统Android中内置的浏览器也是采用的WebKit引擎。  
    Nokia S60:   诺基亚公司将WebKit移植到SymbianS60操作系统中,并开发了基于Webkit的手机浏览器“Web browser forS60”,广泛用于诺基亚、三星、LG等基于Symbian S60操作系统的手机中。   
    Web OS:   Palm 推出第一款基于WebKit的操作系统,PalmPre是第一款基于该系统的手机产品。   Linux:  尽管WebKit的原型K内核是由Qt写成,但Linux下目前最受瞩目的WebKit项目却是Gnome领导的WebKit/Gtk+。随着奇趣科技于2008年6月被Nokia收购,Qt方面也加快了WebKit的“回归”进程。  Midori,GoogleChrome,GNOME的Epiphany、KDE的Konqueror,Arora是现在Linux系统下主要的Webkit内核浏览器。  
    Windows:
      Webkit内核在Windows上发展最晚,Safari(forWindows),Midori,Googlechrome,具有双核模式的傲游3和搜狗浏览器2(高速模式下使用Webkit核心)是最为常见的Webkit浏览器。2009年推出的safari和Chrome以及2010年推出的搜狗浏览器V2.0Beta和傲游3.0beta都使用的webkit引擎完全通过了acid3测试满分!
    展开全文
  • WebKit.NET

    2018-01-22 17:45:57
    WebKit.net是对WebKit的.Net封装,使用它.net程序可以非常方便的集成和使用webkit作为加载网页的容器。
  • Delphi WebKit

    热门讨论 2012-10-17 14:20:48
    Delphi 对WebKit的封装,使Delphi能够使用WebKit内核浏览器载入网页。
  • 下载Webkit

    千次阅读 2019-06-30 17:58:00
    下载Webkit http://webkit.org/building/checkout.html 1.获得Webkit http://nightly.webkit.org/ 2.在线浏览代码 http://trac.webkit.org/browser 3.check out源码 装SVN客户端,check out 4....

    http://webkit.org/building/checkout.html

    1.获得Webkit

    http://nightly.webkit.org/

    2.在线浏览代码

    http://trac.webkit.org/browser

    3.check out源码

    装SVN客户端,check out

    4.随时更新

    运行update-webkit获得最新代码

    posted on 2010-05-15 06:27 Zhu Qing 阅读(...) 评论(...) 编辑 收藏

    转载于:https://www.cnblogs.com/Qing_Zhu/archive/2010/05/15/1735902.html

    展开全文
  • Webkit 源码

    2013-04-22 13:50:07
    Webkit 源码,开源项目源码。里面源代码,工具,demo都有
  • WebKit架构

    2018-03-26 19:45:30
    下图为Webkit的架构图,不同的厂商浏览器有不同的webkit移植(Ports),所以在整个webkit项目中,就存在部分代码是不共享的,例如下图中的蓝色部分,在不同厂商浏览器的webkit中实现就是不一样的,而绿色部分则基本...
  • c# winform 调用webkit

    千次下载 热门讨论 2010-11-30 17:38:03
    c# winform webkit C# 调用webkit
  • WebKit2.NET

    热门讨论 2013-01-27 22:12:49
    WebKit是开源的Web浏览器引擎所使用的一些最流行的Web浏览器,如Safari和谷歌Chrome和许多手持式设备。 WebKit2是WebKit的新的,完全不阻塞API层,它引入了一个分裂的过程模型 - web进程是孤立的UI过程中提供更好的...
  • webkit与qt webkit

    千次阅读 2013-05-28 21:32:18
    WebKit 是一个开源的浏览器引擎,与之相应的引擎有Gecko(Mozilla Firefox 等使用的排版引擎)和Trident(也称为MSHTML,IE 使用的排版引擎)。 同时WebKit 也是苹果Mac OS X 系统引擎框架版本的名称,主要用于...
  • webKit介绍

    2015-09-06 23:44:08
    WebKit介绍
  • webkit
  • webkit内核浏览器

    2016-04-19 11:09:24
    1. 这是一个基于webkit内核的浏览器。它只有简单的功能,直接调用一个html文件。 2. 使用windown sdk封装的webkit浏览器。 3. demo出自 http://blog.csdn.net/x931100537/article/details/39320149 此demo直接调用...
  • C#WinFrom窗体集成Webkit内核 webkit.net包+教程+源码 全包
  • WebKit可以在不同的操作系统上工作。不同浏览器可能会依赖不同的操作系统,同一个浏览器使用的WebKit也可能依赖不同的操作系统。在操作系统层之上就是WebKit赖以工作的众多第三方库。通常讲,它们包括图形库、网络库...
  • webkit介绍

    2017-09-30 11:05:16
    现在基于WebKit的浏览器已经无处不在了,恐怕除了微软的IE以及Mozilla的Firefox,其他浏览器已经全被WebKit给占据了。 那WebKit到底是什么呢?要回答这个问题,首先让我们来看一下什么是浏览器是: · 浏览器是一...
  • WebKitWebKit For Android Posted by admin on May 10, 2010 in Android, WebKit, 浏览器 | Subscribe 如需转载,请注明出处! WebSite: http://www.jjos.org/ 作者: 姜江 linuxemacs@...
  • Webkit CSS properties

    2019-09-27 08:41:30
    Webkit CSS properties -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-animation-fill-mode -webkit-animation-iteration-count -webk...

空空如也

1 2 3 4 5 ... 20
收藏数 57,204
精华内容 22,881
关键字:

webkit