I can use FireFox and FireBug, in a pane, I can open a .css file, in real time, as I make edits, I can see those edits reflected in FireFox. This is a very handy and valuable feature.
Without starting a debate over browsers, I would love to be able to do the same thing in Safari. My far too small display on this laptop aside, real time development of css helps me move things along at a very nice pace.
While I am near certain any input manager for Safari would not officially be supported, I am OK with that. I have been playing around with the "Web Inspector", but as far as I can tell, this will not fit the bill for my needs.
Are you doing this on a Mac? You can give CSSEdit a try. It's not free, but has a built in webkit preview
Get the latest version of webkit, it has a much more powerful version of Web Inspector which you can use side by side with the latest Safari (two browsers open) to debug Safari.
Which version of Safari are you using? I'd recommend getting Safari 4 Public Beta, which has a brand new Web Inspector that allows you to edit the DOM real-time (I'm not sure whether you can actually edit a CSS file with it, however).
Steve
You could try installing FirebugLite.
Related
I just completed successfully transforming my site to CSS Grid. It works fine in Chrome and Firefox but scrambles things a bit in Edge and IE. In Safari for Windows it is also not right, but I believe that is an old version of Safari. I don't have an Apple to try an up-to-date version. Chrome and Firefox seems to have the lions share of usage statistics, so I am probably OK, but I thought I would see if anyone
has other opinions before I publish the site. Thanks for any suggestions.
you can loook at the can I use it page.
For browser which not support CSS Grid u can try a Modernizr Script. Try to look in the docs here
Firefox's Latest version
IE7
IE6
IE 8
Which browser we should use to see HTML css rendering for always and why?
Edit:
My question is not on which browsers should i test site before go live. i will try to test on all possible.
My question is which browser should i choose during layout development process and why?
because while development it's not possible to see every step in all browser it will waste time. after making a layout we can test in all but during development one browser would be better.
Uhh... every one of them?
I personally develop with Firefox 3.6 for convenience and the availability of Firebug, header sniffers and other tools. I try to test in all the browsers you mention before anything goes out for anybody to see (a client for example). But I don't think there is a real "best" choice here because in the end, you will need to test for every browser you need to support anyway.
Use the most up-to-date css compliant browser with a good debugging tool e.g. Firefox 3.6 and the Firebug plug-in.
Then check in the other browsers you want to support for your users and backwards correct any errors.
Do not attempt to make the site look EXACTLY the same in all browsers, you will be wasting your time.
As long as the effect is similar in older/other browsers (for example you could use border-radius for Firefox/WebKit browsers and this will degrade nicely for browsers that don't support border-radius) and the site is usable and fulfills it's purpose, then your ok
DONT WASTE TONS OF TIME ON IE6. Use a conditional commented stylesheet and just get it usable...
In the head of the document
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE6.css"/>
<![endif]-->
It all depends on your target user group.
If you're working for customer that uses IE6, you will have to test for it. Sad, I know.
If you're designing a site for general public, then test for current versions of major browsers. Firefox, IE, Opera, Safari and Chrome(?).
Also: develop according to standards then fix whatever does not work in one browser or another. Not that you develop for IE, then trying to fix everything that suddenly falls apart on all other browsers.
During developing NOT testing I use this combo :
firefox
firebug extension
webdeveloper extension
live http headers extension
Give it a try, you won't regret it, you can make changes to your css IN BROWSER and then change your code (No more refresh needed for that one annoying one pixel offset), check to see where is the fault interface or code logic and plenty more.(Page Speed & YSlow to analize your page speed etc.)
I whole-heartedly agree with Pekka.
I develop everything within Firefox and use the excellent addons available during development (Firebug / Web Developer Toolbar / etc).
A suggestion would be to test often in other browsers as well....I would recommend every time you go to take a little break check it out in the other browsers to see if there are any issues, and then make a note to fix them and allow your website to be rendered properly in all browsers.
You really don't want to exclude any user based on his/her browser preference, so make sure
it works across the board!
edit
Also a good point from one of the other users...IE6 is in the process of being phased out, however if you are looking to have any users in a corporate environment you don't want to exclude testing this either!
You need to test your css in all the major browsers, that includes IE (6, 7 and 8), Firefox, Chrome and even Safari and Opera.
You can probably get away with just using the latest versions of Firefox, Chrome etc. as they auto-update and so users are less likely to be using older version (though it's not unknown).
IE is a problem because so many users - particularly corporate users - are running older versions.
Choose one, it doesn't really matter which as long as it has good development tool support, to develop in and get the site looking good in that. Then test in the others. Which order you do this and how much effort you want to expend will depend totally on your target audience. From my experience Firefox with Firebug and even (dare I say it) IE8 with it's built in developer tools are good choices. The advantage here is that you'll cover the majority of users with these. However as the browser market is getting more fragmented you will need to test in others.
This is an interesting question, I'm going to assume that you have a process that means that first you develop your page and then you do cross browser testing to make sure it works everywhere - so the question then becomes which one is going to get you to the best starting point for getting to working "everywhere" (definition of which will depend somewhat on your target audience).
This used to be easy - according to my (then) staff Firefox had good standards support and the best tools - so get it right in firefox first then adapt to cope with everything else, now its a lot less clear as IE8 has a very decent set of dev tools (and is better behaved than its predecessors) and Chrome is now getting into the act - again with a good set of tools and extensions.
My gut feeling is probably Firefox, Chrome, IE8 in that order - but I'm not doing anywhere near enough CSS work to assert that that's right.
You develop in Firefox (you have firebug to adjust things), you test in safari/chrome & opera (all of them is ok with standards so you have low chances to have bugs in those) and you debug in IE. Because is impossible to have a fully functional in ALL browser from one try :D
I use my main browser (Chrome) for basic progress, and frequently check all other browsers for bugs and layout problems.
I think If we choose firefox and IE 6.0 both for website design, the site will be look almost same for all browsers, because rest of IE 6 & 7 all browsers' HTML rendering pattern is almost same. So If we make css from start considering firefox and IE 6.0, bugs would be in less numbers and In this way we can make all browser compatible website.
Please give me feedback
I do it in ie6, the most primitive browser which is still in use.
I think any thing that will work on ie6 will work on any browser.
So I do quite a lot of CSS development, and I work with Firefox / Firebug A LOT. I generally know how to debug for IE6/IE7 (as far as techniques) and if I have the source, I can easily just edit the actual files and run a local server on a linux machine and test it in IE, going back and forth until it's fixed.
I find myself lately being asked to debug problems in IE6 when I don't have the source. Is there anyway to emulate a firebug like flow in IE6?
Firebug Lite doesn't allow you to change css values, nor does IETester. It doesn't necessarily have to be an inline tool (maybe there is some utility to quickly download 1 off webpages and their dependencies), but I'm definitely looking for the most productive solution to fixing bugs in IE when I don't have the source readily available to me.
Try the IE Dev Toolbar.
It's not as convenient or user-friendly as Firebug, but it can modify CSS and HTML attributes.
Firebug Lite is the best way to debug html in IE.
Firebug is an extension for Firefox,
but what happens when you need to test
your pages in Internet Explorer,
Opera, and Safari?
The solution is Firebug Lite, a
JavaScript file you can insert into
your pages to simulate some Firebug
features in browsers that are not
named "Firefox".
Firebug Lite creates the variable
"firebug" and doesn't affect or
interfere with HTML elements that
aren't created by itself.
Since you already know about it and it doesn't fit what you need, take a look at DebugBar. There is also a MS solution with Internet Explorer Developer Toolbar.
you have tryed Internet Explorer developer toolbar
Why, the IE developer toolbar of course!
It allows manipulation of HTML and CSS values.
3 solutions which i use always
Use IE 8 with developer toolbar in IE 7 emulation mode to solve problems of IE 7 and for IE 8 use in normal mode
for IE 6 it's best till date for me i use this a lot http://www.paciellogroup.com/blog/?p=7
and this to judge right selectors it's very good http://www.westciv.com/mri/ ( i use this for all browser, because it can tell perfect selector for element )
Firebug lite and IE developer toolbar on IE7 not much useful
I am a CSS newbie. Is there a tool that can help debug CSS styles applied to a web page.
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.
By browser:
Firefox there is a plug in module called Firebug. It is easy to install and very powerful. It is even better when combined with 'Web Developer' for Firefox.
Internet Explorer has a Developer Toolbar, which is not as good as Firebug but good enough to check things still work in IE. Additionally there is a tool called IE DOM inspector. There is also a version of Firebug for IE caled Firebug Lite.
Google Chrome comes with built in tools similar to Firebug. See the 'tools->developer' option in the pull down menu to the right of the address bar. This allows you to see the css rules used by each element. It also has Javascript debugging support.
Safari uses a tool called Web Inspector.
Opera has a built-in utility called Dragonfly.
You use Firebug in Firefox, which makes debugging a lot more easy.
And built-in DragonFly in Opera.
You can use the Firebug plugin for Firefox. It is very useful for CSS.
You can dynamically switch on and off styles and fields from styles. It is great.
If you're not using Firefox you can now get Firebug Lite which you can use in IE etc.
Web developer tools like Safari’s Web Inspector or Firebug for Firefox can help you to debug your CSS. Those tools can show you the rule cascade applied to a specific element and allow you to change or disable particular properties.
Use Firefox to develop and test your CSS first, then switch to other browsers to test your code. This is a generally accepted method IMHO.
Firebug is great, but it works even better if you combine it with Web Developer plug in for FF.
There is a great site, worth checking out, with lots of info about CSS and HTML development.
When you need to debug IE - specific problems. I've heard people telling IE DOM inspector is not too bad. You can also try tools described in this post.
Now you can use my newly released tool for this in most modern browsers!
HTML Box Visualizer - GitHub
Recently, I started maintaining a web application which unfortunately works only with IE 6. Most of the issues are related to CSS.
Is there any tool which can help me standardize the CSS classes to work with both IE 6 and IE 7? I understand I have to go through standards but I need something to start with quickly.
Firebug can help me to some extend in identifying the CSS classes related to the UI elements (if the page renders on firefox). But, I was looking for something more like an advisor tool. If you have some experience to share, please feel free.
Try out SuperPreview or the whole package (Expression Web announced at Mix)..
SuperPreview is a new free standalone application from Microsoft (still in beta) which enables you to see how your websites will look across different versions of Internet Explorer making migration from IE6 to 7 and 8 much easier than before, without have to start up a Virtual Machine to run IE6, or have a separate computer dedicated to running IE6.
Check out Dean Edwards' IE7
Tredosoft's Multiple IEs is a good compare/contrast. You go ahead and upgrade to IE7, then install this (selecting just the IE6 option, unless you need all of 5.5/5.0/4.0/etc.), and you can see the pages simultaneously in both browsers. This will help you figure out what has to be conditionalized/hacked.
Also, the IE Developer Toolbar, although not as good as Firebug et. al., will at least let you see in IE what the browser thinks is happening with your styling.
Sometimes you need to introduce a little hack for IE6 and IE7 like removing double margin and I use the following pure CSS code
css-selector { code for all browsers }
*html css-selector {code for IE6 browser }
*+html css-selector {code for IE7 browser }
it is not a tool that you expecting, but may be it would helpfull