Css detect element font - css

I am using several fonts on my website , and i don't think all the fonts are loading properly .
is there a way to check which font an element is having as style perhaps a good plug in anyone can recommend ?
I know there are plenty of debugging tools but i am searching for one that gives you all the given styles of an element not just the css code relevant to it .

you can use firebug for firefox , it has a really useful way to inspect html elements ( or even scripts ) .
what you are asking for is present in the computed styling section on the right once you click on the specified element after inspecting using firebug .
you can find it at : https://getfirebug.com/

There are several ways to check this, but one example is to use the developer tools in Chrome. If you view the 'Styles' applied to your text there should be a font-family rule.
Uncheck / check this rule to see if your text changes. If you can see no visual change on the page, then this rule is not applying any meaningful changes to your text - ie. most likely your font is not working.

Related

How to debug CSS codes?

How does one generally debug CSS and resolve issues when some elements on the page are not appearing as they should? For now, I have to painfully comment out CSS declarations one by one to understand how the styles are getting displayed.
While you can not "debug" CSS, because it is not a scripting language, you can utilize the Chrome DevTools Elements panel to inspect an element & view the Styles pane on the right.
This will give you insights as to the styles being overridden or ignored (line threw).
CTRL + SHIFT + I
To Find Errors & Warnings use CSSLint
Debugging CSS and HTML code bugs can really ruin your application design. There are multiple ways to debug CSS and HTML code. There are few things or ways you should consider the debugging and taking care while developing HTML or writing CSS.
Check your syntax errors with http://csslint.net/. It provides the
nice tool and highlights a line where an error occurs.
Closely review your cross-browser compatibility issues. A site looks nice and beautiful in a firefox but sometimes it will not
look nice with another browser at that time you should take care of
cross-browser compatibility issues of CSS. You should nice and proper
CSS framework that will prevent to generate cross-browser issues and
verify HTML tags and CSS properties which may support by browser
correctly.
Browser web developer tool allows outlining an HTML and element with
different criteria this will allow to writing appropriate CSS for HTML
element.
Turn on or off stylesheet with Chrome dev tools. If you’re wondering
how your CSS is affecting a particular page element, the Chrome
DevTools make it easy to toggle each property. In the Google Chrome
web browser, simply right click and choose Inspect Element from the
context menu.On the right side of the Elements panel, you should see a
tab called Styles with some CSS inside of it. This shows you which CSS
declarations are being applied to the selected element, and if you
hover over each CSS property, you can uncheck them individually. When
a property is crossed out, it typically means that it is being
overridden elsewhere. You may need to uncheck a property in several
places to actually remove it from an element.
Use computed tab in chrome dev tools. it tells you exactly how the
browser is computing your styles. When working on large projects this
is essential for resolving cascading issues, problems with selector
specificity, and more.
You may enable chrome dev tools with ctrl+shirt+I or press F12 key
which supports in almost every browser.
Use this to debug your css
* { outline: solid 0.25rem hsla(210, 100%, 100%, 0.5); }

Trying to apply "-webkit-box" into "display" property in Wordpress

I have a weird issue. I am using the Bones theme in Wordpress, and simply trying to put a style on my home page menu.
The site is h*Xp://www.advanceditsolutions.net/nearitest/
The CSS I’m trying to use is this:
.home ul#menu-pages {
display: -webkit-box;
}
I have it in both of the media query sections, min-width:481, and min-width:768. I’ve also tried it outside of the media query scope, no luck. I can’t figure out why it doesn’t get picked up though. I inspect it on the site, and nowhere do I see the display CSS.
What sucks is, the placement is fine is most browsers, but Chrome it's all jacked up.
:: scratches head ::
1) First of all, you're using vendor prefix -webkit- that will work just on specific browser(s).
2) Check if the value is correct. Here is the list of all possible values for display property. Are you sure that -webkit-box is a correct value that can be applied to display?
Maybe instead of telling that the CSS you want to apply, doesn't work, share the larger context, a screenshot and tell us exactly what you want to achieve.
3) Do you use some developer tools, like Chrome Dev Tools, Firebug or something similar to apply and test styles? It's handy and can save you bunch of time trying to figure out what's wrong...
I can see it is working within the min-width:768 media query. You only have it included once in the stylesheet though from what i can see.
Two critical issues here are:
1) This css will only target the home page because you've used '.home' as part of your selector.
2) You've used the '-webkit' vendor prefix so it'll only work in browsers that run on that engine and support that property. I would recommend against this. You are probably better off using a flex display type.

Google Chrome Developer tools not showing inspected elements styles?

I am using the google chrome developer tools for testing my website;
It is working fine for some elements, however for others it is showing the selector but showing it as having no styles; The element does have styles, and the styles are applied to the element. but the inspector shows no styles.
If I click the link to the css file line for that inspector I can see the styles there.
I saw a google group topic that stated that removing any empty url() declarations fixed the bug. however I have no empty url() declarations.
I also found this bug which is somewhat similar; but not exactly the same. one thing I did notice is that both the usecase this bug provided and my setup are using twitter-bootstrap. I am using the .less version of bootstrap which includes bootstrap into the single css file as a copy > paste method, so my css file has 3740 lines. could this be part of the issue?
The elements are not deep nested (body > div#container > inspected element).
There are not an excessive amount of styles applied to the elements (<= 10).
Click to enlarge
Ok, so I also found this bug aswell which looks like it has a closer match to the bug.
It states that
DevTools break when an unrecognised pseudo-class is present in CSS
which twitter-bootstrap does! so it looks like the dev tools are broken if you are using twitter bootstrap (or anything that tries to use vendor-specific pseudo classes). afaik the only way to solve this is to wait for this bug to be solved by the developers.
If someone can post a fix for this I will accept their answer!

I can't find many css references in the style.css file on Shopify.

I want to edit the class "top-labels" from the shopping cart page but I can't find it in the css stylesheet. How can I get around this?
Can anyone help?
Cheers
Use an A-grade modern web browser, like Chrome, Firefox or Safari. Find the developer tools for your choice. You might install Firebug for Firefox for example.
With that, right-click on the element you're interested in, say the one with the class top-labels. The browser tools will tell you exactly which CSS file contains the definition of the class, and the line number.
It cannot really be much easier. You can also change the CSS in your browser in that definition and see what the changes do, live. That is invaluable.
I think we need more info but from what you've said I'd guess that the top-labels class is either located in a different style sheet or is an inline style on the page.
You could try adding the top-labels style into the stylesheet you're using and add the styles you want to it that way.

How to copy a CSS style from a website for re-use

I am frustrated. I have one website where my drop-down CSS menu works and another where it doesn't.
Their stylesheets differ wildly and, although I have tried to manually copy the menu styles from one to the other, but with no success.
Is their any tool which will let me (like FireDebug) click on a page section (the menu) and then copy the rules which affect that section - ignoring those which are hidden by other rules - so that I can post them into the second site's stylesheet.
It seems that rather than having multiple styles affecting the menu and trying to sort out which have precedence, I'd like to have some software sort it out and generate a single combined rule ... if you see what I mean.
Both FireBug and the inbuilt Chrome Dev Tools show you what styles are being utilised by the selected element. I don't work with FireBug much, but I know the Chrome Dev Tools will cross out overrided styles and even show default user-stylesheets where applicable. It's also kind of nifty when inline styles are applied, eg for a table the "frame" attribute, as it converts these to CSS and displays it as part of the styling ;)
Sounds like you've got problems with accidental inheritance. Try to make sure your CSS selectors are only referencing the elements you want to style. Otherwise things get messy, and stuff like this happens.

Resources