Add style rule dialog box in Visual Studio 2012 - css

Just noticed that Add Style rule dialogue box which showed up CSS-outline is missing in VS2012 or I am missing some changes made by MS?

This is discussed on the MSDN forum here.
As far as I know that the Style menu has been moved from VS2012,
however, you can get the Build Style feature from the toolbar. Go to
View->Toolbars->Style Sheet.
However, you still can't get the "Add Style Rule" option which is
available in VS2010. If you feel it is a very important feature to
you, you can consider submitting one feature request on the Microsoft
UserVoice site here:
http://visualstudio.uservoice.com/forums/121579-visual-studio

Related

Firefox DevTools - "CSS Grid is not in use on this page"

I'm building my first application using CSS Grids.
Using Firefox's DevTools, I'm able to to highlight the Grid's tracks by clicking "# grid" next to an element in the "Rules" pane :
But when I click the "Layout" pane, it always shows "CSS Grid is not in use on this page":
Why is that?
(I'm using the latest Firefox version available today, "62.0.2")
UPDATE: Here's an example project.
UPDATE 2: It does work when I create a new, fresh, profile! But it doesn't work with my current profile, even when I start in safe mode, with all add-ons disabled... I guess I'll customize a new profile!
I agree with you indeed this is a bug in Firefox, I'm using the latest version of developer edition 85.0b9, I faced the same issue. You can clearly see, I've display as Grid still it says CSS Grid not in use on this page.
Issue - It happens when you open it in the default or the 1st Tab, it's not setting some tab-value there. The bug is still not fixed by Bugzilla's dev team, open from past 2 years. Let's hope they fix in future.
Issue Link - https://bugzilla.mozilla.org/show_bug.cgi?id=1492370
Solution - Just duplicate your tab, it'll work like a charm.

Which is the Firefox tool corresponding to Chrome->Web Developer ->Styles?

When using Selenium, I found the Chrome -> Web Developer -Styles window very useful in getting CSS names of web controls.
I could right click on a web control and would get the CSS name for that control. This helped me avoid using XPath.
However, the in-house web application has blocked right click, so I am not able to use that facility any more. However I can still use Firebug to show me the XPath of a control since it works if I click the arrow in Firebug toolbar, which then displays XPath of every control that I hover.
So, the question is - Does Firefox addons have a corresponding CSS identifier tool?
Or
Is there a way around the right click block in Chrome? (For some reason Chrome used to guess or build the CSS name quite accurately which I did not find in Firefox.)
The HTML panel of Firebug has a Styles side panel, where you can get all the applied styles for the selected element.

Finding documentation in XCode 4.5

I'm very used to option clicking on something in XCode, and then clicking the "notebook" icon in the top right, to bring up the appropriate documentation (see the image below).
Where has this icon gone in XCode 4.5? (i.e. how do I get to the documentation in 4.5?)
If you click on the link in the reference section of the popup, it will take you to the documentation section of organizer. I'm not sure if this is what you are looking for as I have never used the feature pre 4.5. Just tested this on my computer and it worked though.

Turning off auto-styling for Web Form designer in VS2012

Whenever you are in design mode in VS2012 for editing a Web Form, if you click on anything, and accidentally drag and drop, a CSS auto-style will appear at the top of the HTML for the aspx page.
From some preliminary research, I checked the following:
Tools>Options>HTML Designer>CSS Styling>Style Application Mode, but it was already set to manual. Is there somewhere else I should be looking to disable this functionality?
Right now there is no way to turn off this. We have received this feedback through connect link. Please add vote to this connect bug. And we will consider this in future release of VS.
I also found this, and I have assoicated it rightly or wrongly, with large pages getting totally corrupted (table cell contents being apparrently randomly swapped).
I managed to turn autostyle off by going to Tools>Options>HTML Designer>CSS and selecting 'CSS (inline styles)' for each of the items there.
Autostyling has stopped and (fingers crossed) my latest pages have retained their integrity.
Tools > Options > Web Forms Designer > CSS change all CSS(classes ) to CSS(inline styles)

Firebug-esque CSS editor

Here's my current workflow for editing CSS:
Me: "Take a look at this page!"
Guys: "Try making the post titles bigger"
Right click on a post title, choose "inspect" (to inspect it in firebug)
Find the appropriate CSS statement in Firebug (h2.post_title or something)
Modify the CSS in Firebug, ask friends how it looks
If it looks good, make the change again in Textmate
I want to avoid step 6. I.e., I want the ability to edit CSS via a Firebug-like UI and be able to commit my changes to the relevant file immediately (rather than having to copy them by hand as I do with Firebug)
Edit: Something that works on a Mac would be ideal
Have you tried "Web Developer" extension in Firefox? It allows you to open, edit and save CSS files.
http://www.skybound.ca/
Go forth and be enlightened. This is truly a life changing program.
Another possible workflow:
"Hey guys, take a look at this page!"
"Try making the post titles bigger"
Make the change to the CSS file
Hit reload
I only use Firebug for debugging (eg: "why is this thing getting that style?") not for making changes when I know where they need to go in the CSS. This workflow does depend somewhat on being able to reload the CSS easily. If you're working on an app where hitting reload completely disrupts your state it might not be ideal.
Check out Backfire:
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
Haven't tried it, but sounds promising.
Check out my contribution to this problem:
http://www.cssupdater.com
Step 6 would then be:
6: One click on the "Sync now" button in Firebug!!
The click sends your changes to the desktop application, which syncs your orignal css files.
You can also choose the changes you want to sync in the application. It works with your favorite text editor or IDE and on both Windows and Mac!
Heureka?
XRefresh with "Soft Refresh" enabled may help your workflow, but you still need to know what CSS selectors do you want to add/edit.
What's why I'm developing LIVEditor, because I don't want to manually redo the change again in the text editor after tweaking my css styles in Firebug (or the likes).
Backfire (see post below) was created specifically for Quplo (http://quplo.com), which is a tool that specificly does what you describe. You write html and css, then talk about what needs to be changed, make the changes (using firebug or web developer toolbar) and hit save.

Resources