Say I need to develop a web site for multiple browsers. major ones - Firefox, Safari, IE, Opera, Chrome
How do you debug display issues? In Firefox there's Firebug, which is great. There also is a Firebug Lite for other browsers, but it's not full featured - it does not refresh in real-time. For example, if I suspect that jQuery is slowing it down (adding classes, etc), how would I find out?
Firefox has Firebug
Opera has Dragonfly
IE8 has developer tools
Webkit browsers (Chrome/Safari) have web inspector
Aside from these, you may want to look up the outline property which adds a border to elements, but without disrupting the page flow. This is useful for side-by-side comparisons.
If you have some classes being applied with jQuery, simply use the outline property on them and it should appear when the class is added.
.class1 {
outline: 1px solid blue;
}
.class2 {
outline: 1px solid red;
}
IE8 includes great developper tools
You can validate CSS using W3C CSS Validation Service
About About the CSS Validator
Developer Tools
IE Developers Tools
Opera Dragonfly
Safari Web Inspector
For cross-browser debugging, you can use Firebug Lite. It's like Firebug itself, but as an external JavaScript library and tested in FF, Opera Safari and even the good ol' IE (as the webpage states).
Check out my new tool to view the layout of any element on your page by mousing over it - CROSS BROWSER!
HTML Box Visualizer - GitHub
Related
I used display:flex; in every css file of my site but now it is working fine in google chrome but in UC Browser(phone) it is not working.It is just skipping flex and showing items vertically.How can i correct this without changing the full coding of the site.
Thank you
Please note that most web standards are not supported in UC browser along with the fact that it removes some css and js from web pages for faster page load.
Still, it uses WebKit as its rendering engine, so you can try to support Webkit as much as possible and you'll be good to go. Furthermore, tools like auto-prefixer will fix most of the cross-browser issues.
It's best to consider caniuse.com to check which features are supported by your target browser.
It depends on how you've structured your css. display:felix; doesn't work in all browsers. This is why it's important to research your css and browser compatibility.
Use this caniuse.com
Use display:-webkit-flex;
I think display:flex; isn't supported in UC.
i think this is right for flex
display:-ms-flexbox; //for ie older version
display:-webkit-flex; //for chrome older version,firefox older version,safari
display:-webkit-box; //for android ucbrowsers forever,i think you gonna try this line
display:flex; //for all new versions browsers like chrome 66 and above firefox 46 and above ie11 and above eventhough safari , opera and some more newversion browsers can support this line
you can go for this line in ucbrowsers in mobile or pc => display:-webkit-box;
if you want inlie-flex try this and it's works display:-webkit-inline-box;
Chrome on Left, Firefox on Right
We're using jqmath and would like to use the line-through text-decoration, as described here: How does one indicate strikethrough in jqmath?
This works in Chrome, but is not working in Firefox.
.deletedText {
color: red;
text-decoration: line-through;
}
...Neither of these will produce a line-through in FireFox (but both work in Chrome)
<li>$ \cl "deletedText"{ax^2+bx+c=0}$</li>
<li class="deletedText">$ax^2+bx+c=0$</li>
Any assistance is appreciated.
This is an issue with native MathML in Firefox. Firefox and Safari actually implement (large parts of) MathML, but the implementations don't always respect all CSS properties. This example works in Safari 10, for example, but I don't know if it will continue to work in Safari in the future. You could file a bug at mozilla. One problem is that MathML is not being actively worked on by the browser vendors (I am hoping this will change as schools get more computers, but I've been hoping for years/decades, sigh), and another problem is that the MathML spec was developed for non-CSS and pre-CSS (!) environments, and some might argue the spec doesn't explicitly state that all CSS properties must be implemented/respected.
If strikethrough is a requirement for you, then in the short-term you can turn off native (browser) MathML in javascript:
M.MathML=false;
Do this in a <script> that's after the <script src="..."> tag that you use to load jqmath.
I am newbie to web development, in specific browser related css compatibility issues.
I have the following css in my home page, which works fine in Firefox, and I can see the css properties when I inspect the element using firebug. But the same css rules are missing when I use chrome. when I inspect, I can't even see the rules in chrome. I wonder why this happens. I understand that some css rules are browser dependent. But now am really confused by thinking how could I resolve this.
Please refer to this link to see my css rules.
Any suggestions regarding why and how this happens. Any useful link also will be appreciated.
Thanks in advance.
Try using a media query, selecting only webkit specific stuff such as:
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Your CSS */
}
This query checks the device pixel ratio in webkit. Safari & Chrome are the only big browsers using webkit, so this will not affect FireFox or IE.
I'm currently trying to style a <meter> tag in all major browsers: IE7-9, FF, Chrome, Safari and even Opera. I've managed to remove the default <meter> styling by using the following CSS code:
meter::-webkit-meter-bar, meter::-webkit-meter-optimum-value, meter::-webkit-meter-suboptimum-value, meter::-webkit-meter-even-less-good-value {
background: 0;
}
This technique works fine in all mentioned browsers, except Opera! It keeps showing the default green meter. Any idea on how to "destyle" the <meter> tag in Opera?
There is no way yet to style such elements in Opera. There is a proposal called Component Object Model which will obliquely allow us to do such styling when it is in a Working Draft, but we are not close to one.
Webkit has implemented a method that is not in any standard and just a suggestion, and I wouldn't assume this is how it would in the future. Most likely these pseudo-element names would change.
Before I start: shouldn't it be background: transparent; or background: inherit;? See the background property in HTML Dog.
I think you're misunderstanding. The meter::-webkit-meter-bar selector should have no effect at all on IE, FF and Opera since the -webkit part is a selector for Webkit. Chrome and Safari use Webkit as a render engine, but FF uses Gecko, Opera uses Presto, etc.
For FF you would probably need something like -moz-meter-bar...
For Opera I do not know. This Opera community page seems to imply that the prefix would be -o rather than -webkit or -moz.
Good luck.
It's also a good practice to include the "normal" selector when adding such rules.
(And if you're lucky, this might just make it work in Opera.)
meter::-webkit-meter-bar,
meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value,
meter::meter-bar,
meter::meter-optimum-value,
meter::meter-suboptimum-value,
meter::meter-even-less-good-value {
background: transparent;
}
I have an ASP.NET page where I need to figure out where the style for a textbox is coming from. There are several style sheets defined for the page and I want to be able to use some sort of tool / editor that will tell me what styles were used and from what file(s) to render the textbox.
Thank you.
Use Firefox with Firebug and inspect the Text-box. Firebug is the most useful tool to do exactly that.
In IE you can use the IE Developer Toolbar. But I'm a fan of FireBug for FireFox.
From comments: Bernard Chhun recommended FireBug Lite as an alternative to IE Dev Toolbar. It also works for Opera and Safari too.
Most browsers have developer tools (build-in or as extension) that can show you the cascading order of the applied rules.
For Firefox there is the Firebug extension, Safari (WebKit) has Web Inspector, Opera has Dragonfly and for the Internet Explorer there is the Internet Explorer Developer Toolbar.
The web developer toolbar for Firefox has CSS and element inspectors which I find very useful.
You can also modify the CSS in the browser so you can tweak layout without going back to your IDE