Microsoft Edge Webkit
Apr 16, 2021 The version 91.0.858.0 of Microsoft Edge Canary on Android introduces some minor changes including a new menu layout, and users can also enable hidden features via the edge://flags menu. Microsoft has made it clear it wants Edge to become a true cross-platform experience. This was the line coming out of Ignite in March (video below). Of course, having a unified codebase would.
-->- Sep 10, 2015 In a blog post, they claim that their offering is “beating Chrome and Safari on their own JavaScript benchmarks” – adding that on WebKit Sunspider, Edge is 112 percent faster than Chrome, on Google Octane, Edge is 11 percent faster than Chrome, and on Apple JetStream, Edge is 37 percent faster than Chrome.
- Further reading: Google, Microsoft, Compat 2021, Chromium, Webkit, Gecko, Chrome, Edge Satvik Khare Email Satvik Khare Satvik Khare is a sub-editor at Gadgets 360.
Complete these interactive tutorials to learn the basics of viewing and changing the CSS for a page using Microsoft Edge DevTools.
Open CSS Examples
Hold
Control
(Windows, Linux) orCommand
(macOS) and choose CSS Examples to open in a new window.Note
If you want to dock your DevTools window to the right of your viewport (displayed in the following figure), choose Customize and control DevTools
...
. On the Customize and control DevTools drop-down menu, in the Dock side section, choose Dock to right.
View the CSS for an element
Open CSS Examples.
Hover on the
Inspect Me!
text, open the contextual menu (right-click), and choose Inspect.In DevTools, on the Elements tool, in the DOM Tree panel, the
Inspect Me!
element is highlighted.In the
Inspect Me!
element, find the value of thedata-message
attribute and copy it.
On the page, in the Value of
data-message
: textbox, enter the value.Hover on the
Inspect Me!
text, open the contextual menu (right-click), and choose Inspect.In DevTools, on the Elements tool, select the Styles panel.
In the Styles panel, the
Inspect Me!
element is highlighted.In the
Inspect Me!
element, find thealoha
class rule.Note
This rule is displayed, because it is being applied to the
Inspect Me!
element.In the
aloha
class, find the value for thepadding
style and copy it.
On the page, in the Value of
padding
: textbox, enter the value.
Add a CSS declaration to an element
![Edge Edge](https://www.faq-mac.com/wp-content/uploads/2008/04/11990_640.jpg)
Use the Styles panel when you want to change or add CSS declarations to an element.
Note
Complete the View the CSS for an element tutorial before doing this one.
Open CSS Examples.
Hover on the
Add A Background Color To Me!
text, open the contextual menu (right-click), and choose Inspect.Choose
element.style
near the top of the Styles panel.Type
background-color
and selectEnter
.Type
honeydew
and selectEnter
. In the DOM Tree, an inline style declaration applied to the element is displayed.
Add a CSS class to an element
To display how an element looks when a CSS class is applied to or removed from an element, navigate to the Styles panel.
Is Edge Webkit
Note
Complete the View the CSS for an element tutorial before doing this one.
Open CSS Examples.
Hover on the
Add A Class To Me!
text, open the contextual menu (right-click), and choose Inspect.Choose .cls. DevTools reveals a text box where you may add classes to the selected element.
Type
color_me
in the Add new class text box and then selectEnter
. A checkbox appears below the Add new class text box, where you may toggle the class on and off. If theAdd A Class To Me!
element has any other classes applied to it, you are also able to toggle each from here.
Add a pseudostate to a class
Use the Styles panel to permanently apply a CSS pseudostate to an element. DevTools supports :active
, :focus
, :hover
, and :visited
.
Note
Complete the View the CSS for an element tutorial before doing this one.
Open CSS Examples.
Hover on the
Hover Over Me!
text. The background color changes.Hover on the
Hover Over Me!
text, open the contextual menu (right-click), and choose Inspect.In the Styles panel, choose :hov.
Check the :hover checkbox. The background color changes like before, even though you are not actually hovering over the element.
Change the dimensions of an element
Use the Box Model interactive diagram in the Styles panel to change the width, height, padding, margin, or border length of an element.
Note
Complete the View the CSS for an element tutorial before doing this one.
Open CSS Examples.
Hover on the
Change My Margin!
text, open the contextual menu (right-click), and choose Inspect.In the Box Model diagram in the Styles panel, hover on padding. The padding of an element is highlighted in the viewport.
Note
Depending on the size of your DevTools window, you may need to scroll to the bottom of the Styles panel to display the Box Model.
Double-click the left margin in the Box Model, which currently has a value of
-
meaning that the element does not have a left-margin.Type
100px
and selectEnter
. The Box Model defaults to pixels, but it also accepts other values, such as25%
, or10vw
.
Debugging Media Queries
Microsoft Edge Webkit Download
Media Queries are a way to make your web product react to changes in the configuration settings for each user. The most significant use case is to provide your product a different CSS layout depending on the dimensions of the viewport. Using separate layouts allows for a one-column layout for mobile devices and multi-column layouts when there is more screen estate available.
If you want to debug or test the Media Queries you defined in your CSS, use the following steps.
Open the developer tools and select the Toggle device toolbar icon second on the top-left, or select
Ctrl
+Shift
+M
(Cmd
+Shift
+M
on macOS).With the device toolbar open, select the
...
menu on the top-right and choose View Media Queries. The colored bars displayed above the webpage represent the different media queries.Hover on the boundaries in the bars to display the values of the different media queries. Choose each to resize the web page to match.
To debug media queries and open the CSS file in the
Sources
editor; hover on any of the bar segments, open the contextual menu (right-click), and selectreveal in source code
.
Getting in touch with the Microsoft Edge DevTools team
Use the following options to discuss the new features and changes in the post, or anything else related to DevTools.
- Send your feedback using the Send Feedback icon or select
Alt
+Shift
+I
(Windows, Linux) orOption
+Shift
+I
(macOS) in DevTools. - Tweet at @EdgeDevTools.
- Submit a suggestion to The Web We Want.
- To file bugs about this article, use the following Feedback section.
Microsoft Edge Css Webkit
Note
Portions of this page are modifications based on work created and shared by Google and used according to terms described in the Creative Commons Attribution 4.0 International License.
The original page is found here and is authored by Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).
Microsoft Edge Webkit Free
This work is licensed under a Creative Commons Attribution 4.0 International License.
![](https://cdn-ak.f.st-hatena.com/images/fotolife/r/ruriatunifoefec/20200910/20200910011327.png)