<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Web Inspector: Pseudo Styles Ordering and Media Queries"
href="https://bugs.webkit.org/show_bug.cgi?id=145979">145979</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Web Inspector: Pseudo Styles Ordering and Media Queries
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>Mac OS X 10.10
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Web Inspector
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>chris@heavymark.com
</td>
</tr>
<tr>
<th>CC</th>
<td>graouts@webkit.org, joepeck@webkit.org, jonowells@apple.com, mattbaker@apple.com, nvasilyev@apple.com, timothy@apple.com, webkit-bug-importer@group.apple.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=254882" name="attach_254882" title="Comparing same file's style rules in chrome and safari">attachment 254882</a> <a href="attachment.cgi?id=254882&action=edit" title="Comparing same file's style rules in chrome and safari">[details]</a></span>
Comparing same file's style rules in chrome and safari
This is in regards to Safari 8.1 on 10.11. Filed a bug report with Apple but also posting here. If there is a separate Webkit forum for 8.1 let me know.
In the attachment I compared Chrome style web inspector vs Safari 8.1 showing the same style from the same page. Chrome properly shows all the relevant styles without needing to scroll. Where is in Safari, (while aesthetically pretty), the actual first relevant style, section.products .img-pro h3" is at the very bottom. Chrome properly puts those :after/:before at the bottom of the list since it's least relevant. Chrome also shows why there is two by highlighting :after in the first style and highlighting :before in the second style unlike Safari which simply lists the rules twice without any visual difference. Also Chrome is showing the properly media query relevant information where is Safari is not at all.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>