Menu
Safari/Chrome Developer Tools indicate that a CSS rule is overridden by something else by striking it through, as shown in the image.
Sometimes I find myself in a situation where I can not figure out from the CSS files what causes this rule to be ignored. But surely Safari itself must know as it strikes it through.
Is there a way to know what overrides such a rule?
318
To use Developer tools in Safari, you can use the Safari Develop menu to debug websites and web apps and ensure your website renders fine in all popular web browsers. In case you don’t find the Develop menu in the menu bar, navigate to Safari > Preferences, click Advanced, then select the checkbox ‘Show Develop menu in menu bar’.
To use Overrides, open the Devtools either from the settings or using the keyboard shortcut CTRL+SHIFT+I. Then, Click on the Sources tab. You'll see at the top of the left menu 3 tabs: Page, Filesystem, and Overrides. Click on Overrides. Below it you will see " Select folder for overrides." Click on it and choose a folder.
DevTools provides a lot of different tools for different tasks, such as changing CSS, profiling page load performance, and monitoring network requests. The Sources panel is where you debug JavaScript. Open DevTools by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux).
Chrome DevTools can help you find the old CSS that is causing your new CSS to not be applied. Figure 1. The max-height: 512px declaration is crossed out. From the Elements panel, open the Computed pane. Figure 2. The Computed pane. Scroll through the list of properties and expand the one that you want to investigate further.
Look at the one which isn't striked out, higher up on the list.
Alternatively, view the computed styles. They will be the definitive applied styles.
176
When you inspect an element, you can show the 'box'. Just bottom of that, you have a 'filter' which should show you every properties being applied to your element.
If you click on a property, it will give you the file and the line number.
39
Developer Tools will list all rules for an element. Just read through all the CSS rules that apply, and check for a non-struck-through one with the same name.
25
Go to Elements >> Computed and you'll get the stylesheet that defines the rule you're looking for.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
