Imagine I have a huge CSS file with e.g. more than 40000 lines, like https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.css
I want to explore this file and for example search for class definitions containing "hidden" in their name. How can this be done? The word "hidden" can also appear in the definition of the class, so a normal text search is not sufficient. So I am looking for a tool which is able to interpret the CSS file and then allows me to semantically search in it, understanding the difference between "hidden" in a class name and "hidden" in a class definition.
Any tips on this? Thanks!
Update: I am using Visual Studio Code, if there is a matching extension for it, that would be great. A separate tool would also be fine.
I’m not sure which text editor/IDE you are using but most IDE’s allow you to search for classes by name, in which case you could just use “hidden” as the input. In IntelliJ, the command for this is Ctrl+N. You’ll have to check your editor or IDE for the shortcut but a simple Google search should give you the answer.
Related
Where can I find a list of the keywords for the styles.less configuration file for Atom?
There are many specific requests for highlighting one thing or another, but I cannot seem to find a general overview of the implemented keywords.
The scope names are supposed to be based on the ones listed at the bottom of the this page (the sublime text ones are also based off this list)
https://manual.macromates.com/en/language_grammars
In practice, nothing fits perfectly. The most reliable way to get the needed scope is running Editor:Log cursor scope in the command palette, which will make a notification popup with a list of all the scopes at the cursor. You then need to pick the relevant ones, and prepend each segment with syntax--.
E.g., if the scope popup says source.md, markup.bold.md, you can target bold scopes with
atom-text-editor .syntax--markup.syntax--bold {
color: red
}
And that's just for text; anything at all can be modified if you know enough CSS. Opening dev tools lets you use the selector tool to find anything you like in on the page the DOM. Targeting it in the styles.less file will let you apply changes.
Here is the namespace for Sublime:
https://www.sublimetext.com/docs/3/scope_naming.html
Normally, you can right-click on a method and select "Go To Definition" (F12) or "Find All References" (SHIFT+F12). You can even go to the definition of a css class from your aspx page by pressing F12 (if your cursor is over the CssClass name).
Is there a similar shortcut for finding all the references of a css class from an external stylesheet? My reason for asking is that I have a stylesheet containing a bunch of css classes that may or may not be in use anymore, and I'd like to know which ones are actually being called without having to read through my code line by line.
Also, I've tried the Quick Find (CTRL+F) tool to search for a particular css class. It doesn't turn up any results even for classes that are in use, so either I'm not using it right or it doesn't bother checking my aspx page for whatever reason. (I suspect it's the former!)
PS I'm using 2010 Express edition.
You can use CTRL+SHIFT+F to bring up the Find and Replace dialog. In there, make sure to verify that the search scope is set to Entire Solution, and try that.
I'm using reStructuredText with epydoc. How can I have the text of an internal link different than the target of the link? I have:
:todo: Figure out the `Product.manufacturer` relationship in `Product`.
The Product link looks fine and links to the Product object. The Product.manufacturer link goes to the proper member variable, but instead of the text being Product.manufacturer, I'd like to just be manufacturer.
I know this can be done if I use epytext, but we'd like to stick with reStructuredText so that we can switch documentation generators later if we want to.
I'm not familiar with epydoc myself, but the normal reStructuredText way would be this:
`manufacturer <Product.manufacturer>`_
Or, with Sphinx,
:attribute:`manufacturer <Product.manufacturer>`
Considering that epydoc seems to have overridden the default role to provide links, it will be being left to it. However, this is the most likely to work:
:todo: Figure out the `manufacturer <Product.manufacturer>` relationship in `Product`.
I have a legacy application that I needed to implement a configuration page for to change text colors, fonts, etc.
This applications output is also replicated with a PHP web application, where the fonts, colors, etc. are configured in a style sheet.
I've not worked with CSS previously.
Is there a programatic way to modify the CSS and save it without resorting to string parsing or regex?
The application is VB6, but I could write a .net tool that would do the css manipulation if that was the only way.
You don't need to edit the existing one. You could have a new one that overrides the other -- you include this one after the other in your HTML. That's what the "Cascading" means.
It looks like someone's already done a VB.NET CSS parser which is F/OSS, so you could probably adapt it to your needs if you're comfortable with the license.
http://vbcssparser.sourceforge.net/
One hack is to create a PHP script that all output is passed through, which then replaces certain parts of CSS with configurable alternatives. If you use .htaccess you can make all output go through the script.
the best way i can think of solving this problem is creating an application that will get some values ( through the URL query ) and generate the appropriate css output based on a css templates
Check this out, it uses ASP.NET and C#.
In my work with the IE control (shadocvw.dll), it has an interesting ability to let you easily manage the CSS of a page and show the effects of modified CSS on a page in realtime. I've never dealt with the details of such implementations myself, but I recommend that as a possible solution worth looking at. Seeing as pretty much everyone is on IE 6 or later nowadays, you can skip the explanations about handling those who only have IE 5,4,3 or 2 installed.
Maybe the problem's solution, which is most simple for the programmer and a user is to edit css via html form, maybe. I suppose, to create css-file, which would be "default" or "standart" for this application, and just to read it, for example, by perl script, edit in html and to write it down. Here is just the simple example.
In css-file we have string like:
border-color: #008a77;
we have to to read this string, split it up, and send to a file, which will write it down. Get something like this in Perl:
tr/ / /s;
($vari, $value) = split(/:/, _$);
# # While you read file, you can just at the time to put this into html form
echo($vari.":<input type = text name = ".$vari." value = ".$value.">");
And here it is, you've got just simple html-form-data, you just shoul overwrite your css-file with new data like this:
...
print $vari[i].": ".$value.";\n";
...
and voila - you've got programmatical way of changing css. Ofcourse, you have to make it more universal, and more close to your particular problem.
Depending on how technically oriented your CSS editors are going to be, you could do it very simply by loading the whole thing up into a TextEdit field to let them edit it - then write it back to the file.
Parsing and creating an interface for all the possibilities of CSS would be an astronomical pain. :-)
I receive HTML pages from our creative team, and then use those to build aspx pages. One challenge I frequently face is getting the HTML I spit out to match theirs exactly. I almost always end up screwing up the nesting of <div>s between my page and the master pages.
Does anyone know of a tool that will help in this situation -- something that will compare 2 pages and output the structural differences? I can't use a standard diff tool, because IDs change from what I receive from creative, text replaces lorem ipsum, etc..
You can use HTMLTidy to convert the HTML to well-formed XML so you can use XML Diff, as Gulzar suggested.
tidy -asxml index.html
If out output XML compliant HTML. Or at least translate your HTML product into XML compliancy, you at least could then XSL your output to remove the content and id tags. Apply the same transformation to their html, and then compare.
I was thinking on lines of XML Diff since HTML can be represented as an XML Document.
The challenge with HTML is that it might not be always well formed. Found one more here showing how to use XMLDiff class.
A copy of my own answer from here.
What about DaisyDiff (Java and PHP vesions available).
Following features are really nice:
Works with badly formed HTML that can be found "in the wild".
The diffing is more specialized in HTML than XML tree differs. Changing part of a text node will not cause the entire node to be changed.
In addition to the default visual diff, HTML source can be diffed coherently.
Provides easy to understand descriptions of the changes.
The default GUI allows easy browsing of the modifications through keyboard shortcuts and links.
winmerge is a good visual diff program