Similar to this question (which is about CSS usage in HTML pages), I am interested if it possible to detect which CSS rules are applied within a JavaFX application to the different nodes.
We currently use Scenic View to inspect UI elements and their properties. This works fine to check the controls' properties (e.g., a text field's font)... Yet, the tool does not help to derive which rule from which file has been applied (e.g., based on which CSS rule bold has been used as font style). Is this somehow possible?
Additional info: Why am I interested in CSS usage? We have multiple custom controls, which may embed each other, and each of which may have its own .css file. We want to be able to analyze that all CSS styling is applied correctly and to ensure that the correct file is used.
Related
For an organization I work for, there is a common stylesheet that all web applications are supposed to use.
For example, they expect some elements to be in thead.table-sortable th.table-sortable-sorted-down a:after to add a sorting icon. Now, in an Angular application, I use a component library (primeng) that has a simple element that just has the class .pi-sort-up for the same thing.
How can I map / copy /use part of the organization css into my application's css, to just copy the interesting stuff without requiring the complicated nesting on component (which I have no real control on anyway)?
We could use css, sass, or even dynamically generate css rules in javascript. I'd prefer avoiding changing the DOM at runtime for all matching components, as it could be quite dynamic.
EDIT: A build-time solution (e.g. with sass) isn't the preferred way, but could be acceptable if nothing else.
If the company style sheet is readonly for you, there is not much you can do at all. You will have to load the whole document wherever you need some parts of it. A possible "workaround" to avoid that would be to write a backend program (in PHP or node.js) which opens the company style document and looks only for a specific CSS rule which it then copies and pastes to some other style document.
However, this approach would be very dynamic as well and you needed to execute the backend script with each request, for the original company style sheet could change always... If your company could agree, you should use a preprocessor like SASS or LESS and define a structure for the company style, dividing it into several documents that can be loaded on purpose.
Is there a way to include a css file with a view model and not a view?
I've tried looking at the nativescript documentation and have not been able to find the answer
This view model is used/presented in a number of different views so adding the css classes to each view folders css file works but makes it harder to maintain as I now have duplicate css classes floating about in different folders.
Alternatively i could put it in the global css file however this can quickly become too large of a file if i need to do this for multiple view models/ styles.
Use case:
A list of items that get validated in an async manner which will change css class based on status (simple use case example background-color changes to: white/red/yellow/green).
please note that I am coding a non-angular app.
I am building an app on top of webkit, I need to modify a CSS file (edit a selector), which I can do once the page is loaded using Javascript. In my particular scenario I may load the page many times and I would like to mutate the CSS in the cache (using Javascript, as opposed to hacking webkit). Any ideas?
Without entirely understanding your use case I see at least three cheap and fast methods to override some styles:
use one of the many bookmarklets out there (e.g. this one by Paul Irish) to play around injecting styles or
use a short snippet of javascript ondomready to inject a stylesheet with selectors and styles into the head of the document (similar to the bookmarklet above) or
define a specific enough CSS selector and simply include an inline style element in your document (which I would not suggest)
All three methods are basically the same. Depending on what you have, are able to edit or want to achieve either method may be more suitable.
User stylesheets or extensions like Stylebot for Google Chrome may be another possibility to look into.
Weird stuff like loading referenced stylesheets via javascript's XHR, get the content of the file, modify or inject stuff and reapply the styles to the current document are possible as well but probably not what you're looking for.
I created a new website with 46 pages: http://www.lampshade111.com/
I use Microsoft Expression Web 4 employing a dynamic web template.
All css was embedded within the heading of the dwt page and updated to every individual web page.
Everything looks and works perfectly - no problems.
However, everything I have read suggests using an external style sheet.
So in the spirit of "good practice", I removed css from the dwt heading and employed (linked) an external style sheet to the dwt.
Of course the individual pages are updated by the dwt and the linked css file is shown on every page.
Again, everything looks and works perfectly as before.
Problem: When viewing my website after employing an external style sheet, the website is much slower in my browser.
I have another website with 256 pages and all css is embedded within the heading of the master dwt - no external style sheet.
http://www.hoylelamps.com/
It has worked fine for many years.
Questions:
Is there any reason to not use css in the heading of a dwt ?
Is this suppose to be more efficient (faster) than an external style sheet ?
I cannot find any information on this subject.
Thanks for any help ? - Jim
I can't imagine why an external style sheet is "much slower" than an external one. A linked style sheet will be cached as soon as it is loaded and will not have to be loaded a second time. That means the second and third pages you load should be faster, unless you are using totally different formatting on each page.
Embedded style sheets will run faster at first, because only one resource has to be loaded. But over time the work needed to maintain multiple pages with embedded style sheets will be much more of a burden. Remember every time you change even one CSS rule in any page, you will have to make that change in every single page and upload all those pages again. If you don't, you will have individual pages formatted differently throughout the site.
An external linked style sheet precludes this problem. One style sheet, one file to correct and to upload. The only things I can think of that would make your page load or respond more slowly are the following:
Very large style sheet
Using "import" instead of "link" command (some browsers react differently to these commands)
You are using non-standard CSS or very dense styling commands.
Without seeing the CSS I really can't give you any more suggestions. The fact that the browser has to load two files at first, will cause it to function slightly slower. But it's hard to understand why the entire site runs more slowly.
Here are some suggestions:
Have you checked and tested your pages in other browsers and other computers? Maybe it's not the page at all. Maybe it's the browser or the computer you are using.
If your style sheet is large, break it into logical components. I have style sheets that format tables, forms and special components that don't appear on every page. Load only the CSS that is pertinent to that page. Have one main style sheet and then specialized style sheets for specific types of components, like those mentioned.
Check the types of commands you are using. Are you making best advantage of Cascade, Inheritance, and specificity? Try to create CSS that is as efficient as possible.
Keeping embedded style sheets may be easy at first, but updating and maintaining a large website with embedded style sheets would be much more burdensome.
Hope that helps.
i want to create some css styles for my Django templates. Each view will have a css associated, but there will be zones that are not associated to any views in my template.
How can i load the css files? is there enough having them declared in the Media of my view, and loading them in the header of the html?
Also, is it a correct approach to have styles associated to the divs that are not associated to a certain view?
Thanks!
If you use a word view for a typical django view (a method) it is not good idea to create separate css file for each view (unless you have very specific application).
In general you need to create you css files in such way that:
general styles that can be applied in many templates are not repeated in multiple css files
it is easy for you to manage styles in couple of css files
There is no strict guideline to create css file per view or css file per template in Django as far as I know.
Basically pointing to some css file in head, which contains styles appropriate to a template is enough here. Of course you need to make sure that you provide correct path to this file.
You can make one general css with styles that are used by most of your templates and a series of specific css files that are valid only in some specialized templates.
I also advice to take a look at django-compress if you want to go with your site to broader audience - this app makes your static files (like css) smaller and also it helps to concatenate group of css and js files. This has some positive impact on performance without decreasing readability of your code.