WEBKIT IN CSS
Hi
Welcome back.
This week, we will be looking at a feature in the Cascading Stylesheet (CSS)
CSS3 Webkit
The word ‘WebKit’ has become more preferred when discussing CSS and web design. However, there is still little confusion relating to ‘WebKit’ in terms of what it means and how it is applied when coding CSS.
WEBKIT.
WebKit is a layout engine built for web browsers to render web pages. Its engine provides a set of classes to display web content in windows and implements browser features such as following links when clicked by the user, managing a back-forward list, and managing a history of pages visited recently.
IN HTML
WebKit is prone to delivering HTML and executing JavaScript in Adobe’s AIR application platform.
IN ADOBE CREATIVE
In Adobe Creative Suite CS5, WebKit renders some parts of the user interface.
COMPATIBILITY WITH BROWSER
Build as a fork of KHTML as the layout engine for the Apple Safari browser and portable to many other computing platforms. Presently, Webkit is compatible with browsers like Google Chrome browser.
The BlackBerry Browser, PlayStation consoles starting with the PS3, Tizen mobile operating systems, and a browser included with the Amazon Kindle e-book reader all use WebKit.
WEBKIT BROWSER ENGINE AS A WEB RENDERING ENGINE.
The rendering engine is the component responsible for what is displayed in the browser. It takes data from HTML or PHP, formats it according to the CSS or XSL, and then serves it to the user browser.
It is vital to have a working knowledge of web browser engines. The component of a web browser is responsible for rendering the content, thus why Webkit is also known as the web rendering engine.
WebKit is known as the rendering engine within Safari on Windows, Mac OS X, and iOS. Other applications on Mac OS X can use WebKit. For example, Apple e-mail client Mail and the 2008 version of Microsoft Entourage personal information manager use WebKit to render e-mail messages with HTML content.
NOTE:-Not all web browsers use the same rendering engine. Internet Explorer uses the Trident engine, Mozilla products like Firefox uses Gecko, Opera uses the Presto engine, and the WebKit engine is used by Safari (Apple) and Chrome (Google) browsers.
Due to different web browser rendering engines, there are times some cross compatibility issues for content layout. In other words, content created for Internet Explorer may not render as the designer intended on another browser like Mozilla Firefox.
New web browsers have been built around WebKit such as the S60 browser on Symbian mobile phones, Midori, Shiira, Google Chrome browser, Uzbl, Maxthon 3, and the Android Web browser.
WebKit has been adopted as the rendering engine in OmniWeb, iCab, and Epiphany replacing their original rendering engines. Epiphany supported Gecko and WebKit for some time, but the team decided that the Gecko release cycle and future development plans would make it cumbersome to continue supporting it. Palm WebOS is WebKit based.
The latest interface update for Valve Corporation Steam uses WebKit for rendering its interface and built-in browser.
WEBKIT IN CSS3 SYNTAX
The ‘WebKit’ is part of the CSS syntax used to render content for the Safari and Chrome browsers. Due to the lack of cross-compatibility, WebKit code may have to be included in CSS to ensure that it will render as intended on Chrome and Safari. Webkit CSS syntax is used for CSS3 modules.
WEBKIT IN CSS RELEVANCE
The relevance of WebKit is to CSS3, the new generation CSS modules that allow features like transition effects, multiple column layouts, and animation. While all browsers may be able to render old CSS specifications to mainly the same degree, the same does not apply to newer CSS3 modules.
For example, in the code CSS3 code below, the white square widens horizontally for 4 seconds when the mouse hovers over it.
div { width: 100px; height: 100px;
background:white ;
/*Start transition effect*/ transition-property: width; transition-duration: 4s; }
div:hover { width: 300px; }
For the same transition effect to render on browsers using the WebKit engine, the CSS code will be as follows:
-WebKit-transition-property: width;
-WebKit-transition-duration: 4s;
NOTE:- Other web browser rendering engines will ignore the WebKit code.
CSS -webkit-appearance
This property enables web authors to change the appearance of HTML elements to resemble native User Interface (UI) controls.
It is a proprietary CSS extension supported by the WebKit browser engine, and its extensions contain the -WebKit- prefix, which indicates that it belongs to the WebKit open source framework.
Although the -WebKit-appearance property is not part of the official W3C CSS specification, it is patterned to work on browsers powered by the WebKit browser engine, such as Apple Safari and Google Chrome.
USES OF WEBKIT IN CSS
It allows web designers to make HTML components look like native User Interface (UI) controls.
Supports the CSS -WebKit-appearance property, which is a proprietary CSS extension.
The -WebKit- prefix on WebKit extensions denotes that they are part of the WebKit open-source framework.
ITS Syntax
The syntax for the -WebKit-appearance property is:
-webkit-appearance: <value>
Where <value> represents the UI control that the element should resemble.
ACCEPTABLE VALUES ON WEBKIT
The accepted values for the -WebKit appearance property include:
- button
- button-bevel
- caps-lock-indicator (The indicator that appears in a password field when Caps Lock is active. Available in Safari 4.0 and later, and iOS 2.0 and later)
- caret
- checkbox
- list box
- list item
- menu list
- menu list-button
- menu list-text
- menu list-text field
- none
- push-button
- radio
- scrollbar button-up (Unsupported in Safari 4.0)
- scrollbar button-down (Unsupported in Safari 4.0)
- scrollbar button-left (Unsupported in Safari 4.0)
- scrollbar button-right (Unsupported in Safari 4.0)
- scrollbar track-horizontal (Unsupported in Safari 4.0)
- scrollbar track-vertical (Unsupported in Safari 4.0)
- scrollbar thumb-horizontal (Unsupported in Safari 4.0)
- scrollbar thumb-vertical (Unsupported in Safari 4.0)
- scrollbar gripper-horizontal (Unsupported in Safari 4.0)
- scrollbar gripper-vertical (Unsupported in Safari 4.0)
- searchfield
- searchfield-decoration
- searchfield-results-decoration
- searchfield-results-button
- searchfield-cancel-button
- slider-horizontal
- slider-vertical
- sliderthumb-horizontal
- slider thumb-vertical
- square-button
- textarea
- textfield
AVAILABILITY
The -webkit-appearance property is available in:
- Safari 3.0 and later
- iOS 1.0 and later
OTHER PROPERTIES OF WEBKIT
Webkit-Only Properties
Webkit -font- smoothing — When typefaces are displayed, the font-smooth CSS property governs the use of anti-aliasing.
HTML Code:
<p> Cherished the Day</p>
<p class=”rhythm”>It is going to be great.</p>
CSS Code:
html {
background-color: purple;
color: blue;
font-size: 2rem;
}
p {
text-align: center;
}
.rhythm{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Webkit-line-clamp — This attribute allows the contents of a block container to be limited to a certain number of lines. It only works with the -webkit-box or -webkit-inline-box display properties and the -webkit-box-orient property set to vertical. In most circumstances, turn off overflow; otherwise, the contents will not be clipped, and an ellipsis will appear after the desired number of lines.
WEBKIT-PREFIXED PROPERTIES ON STANDARD TRACK
- webkit — appearance
To style an element with platform-native styling based on the theme of the operating system. Gecko and WebKit-based and Blink-based browsers employ the -Moz-appearance and -webkit-appearance attributes to achieve the same effect. For compatibility considerations, -webkit-appearance is also supported by Firefox and Edge.
The -Moz-appearance property was used in XUL stylesheets to design custom widgets with platform-appropriate styling and was also used in the XBL implementations of the widgets that ship with the Mozilla platform. Starting from Gecko/Firefox 80, the uses were changed to -Moz-default-appearance, which should never be used outside internal stylesheets.
- webkit- mask- composite
The -webkit-mask-composite attribute controls how multiple mask images applied to the same element are combined. With the -webkit-mask-image attribute, mask images are blended in the opposite order where they are stated.
- webkit-mask- position-x
The -webkit-mask-position-x CSS attribute specifies the mask image’s initial horizontal position.
- webkit-mask- position-y
The -webkit-mask-position-y CSS attribute determines a mask image’s initial vertical position.
FORMERLY PROPRIETARY PROPERTIES THAT ARE NOW STANDARD
- align-content
It controls the amount of space between and around content elements along the cross-axis of a flexbox or the block axis of a grid.
- backface-visibility
The backface-visibility CSS attribute determines whether the element’s rear face is visible when an element is turned towards the user.
SUPPORTED IN NON-WEBKIT BROWSERS WITHOUT A PREFIX, BUT NOT STANDARD
- -webkit-mask-position-x
The -webkit-mask-position-x CSS attribute specifies the mask image’s initial horizontal position.
- -webkit- mask-position-y
The -webkit-mask-position-y CSS attribute determines a mask image’s initial vertical position.
SUPPORTED IN FIREFOX WITH — WEBKIT-PREFIX
In Firefox, the -webkit- prefix supports the following characteristics. Many of these are also available without a prefix.
· webkit-align-content: It controls the amount of space between and around content elements along the cross-axis of a flexbox or the block axis of a grid.
· webkit-backface-visibility: When an element is turned towards the user, the backface-visibility CSS attribute determines whether the element’s rear face is visible.
· webkit-filter: The filter CSS feature gives an element of graphical effects like blur or color shift. Filters are often used to change the way images, backgrounds, and borders are rendered.
DEPRECATED –WEBKIT-PROPERTIES
A “deprecated” element is one that the World Wide Web Consortium (W3C) has identified as obsolete. These items are typically considered “bad code” and should not be used. Deprecated items will fail validation if we employ a STRICT DOCTYPE.
Here are some of the properties that were supported with the -webkit- prefix but are no longer supported in evergreen browsers, with or without the -webkit- prefix.
align: E.g. <p align=” left”> still works just fine, just apply a class and give that class a style of text-align: left; Or, if we have to, apply in-line CSS like style=”text-align: left.”
· image: src=”#” alt=”” border=0 />, for example. It is the most widely used of all the deprecated elements. Borders on photos look terrible on web pages and should never be used as a default unless there is a solid reason. Images do not have borders by default in most browsers unless they are used as LINKS. The default is to employ some obnoxious blue border. Many people try to circumvent this by using border=0 inside the image element. With a single line of CSS, it can simply and neatly avoid this: an img border: 0px;
CONCLUSION
Webkit is used in the CSS syntax for rendering content in Safari and Chrome browsers. Its code may need to be added in CSS to ensure it renders correctly on Chrome and Safari caused of the lack of cross-compatibility.
Its importance is related to CSS3, a new generation of CSS modules that enables transition effects, multiple column layouts, and animation. While all browsers can render previous CSS requirements to a similar degree, the same cannot be said for newer CSS3 modules.
Sources:-
https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions
