So chrome auto updates the changes made to the C:\Users\*\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css. It's great because I can choose my favorite editor and free me from any browser-integrated tools for css manipulation.
But it only works for that specific file. I know it can't be used directly to edit server-side css even when I'm working on a localhost server. But is there any other way I can use this sweet mechanism, perhaps manually telling chrome to look for a specific css file and use that as an alternate Custom.css?
EDIT: Importing doesn't work either i think.. none of these rule seem to have any effect
#import "stylish.1misc.css"; //in the same dir as Custom.css
#import url("stylish.1misc.css");
#import url("http://localhost/.my/stylish.2img.css");
#import url("file:///D:/.localhost/.my/stylish.1misc.css");
related
You can use Chrome Developer Tools to do just that and several other things. Like Also editing and hot swapping Javascript.
There is a plethora of examples you can find by doing a quick search on google or youtube.
Here is an example of hot swapping some CSS on a popular site, making the font-size much larger.
The changes can be saved locally (to the cache folder I suppose) or you can choose to save them somewhere else.
The Changes aren't persistent however, refreshing the page will cause all the changes to be lost, but if you want to make the changes permanent for sites you don't own, you can paste those changes to the Chrome User Stylesheet; or you your own projects you can save your changes locally. For this last case there are plenty of good practices and advice on the links provided above.
Related
I have a ((very)) simple WP site with the above mentioned theme.
The theme loads a ton of external .css and .js files above the fold that causes render-blocking and I am sure I don't use half of them.
The header.php only includes a few directly and most are included via the php wp_head() -tag. I am struggling to find out, which .js and .css are in use and which aren't. Also how to get rid of them totally since I feel like using 'defer' or 'async' is only solving the problem partially.
My site is http://toptand.dk. Be aware, that I currently use WP Super cache for compressing and autooptimize to further minimize render-blocking etc. which might make the header look very different. I would rather get rid of it for real.
I have read many articles about how to prevent render-blocking, but non really explains how to deal with all the crap from a WP template.
The theme loads a ton of external .css and .js files above the fold
that causes render-blocking and I am sure I don't use half of them.
This is very typical of commercial WordPress themes; such themes load many files, as many are required for the "multipurpose" backend functions which provide short-codes, drag-and-drop features, custom post types, ecommerce, etc.
You sacrifice speed and page weight for all those features you use as well as the potential features you don't. If you need speed and a light-weight site, don't use a theme like that. You can go into that theme and wp_dequeue_script scripts and style sheets, but the features theme will break. See https://codex.wordpress.org/Function_Reference/wp_dequeue_script
Try a simpler, lighter weight (and free) theme from https://wordpress.org/themes/ and learn how themes work https://developer.wordpress.org/themes/getting-started/ in order to get features you want without all the extra code.
You can utilize Chrome Dev Tools' Audits tab.
I am struggling to find out, which .js and .css are in use and which
aren't
Upon selecting the Audits tab, include Network Utilization based on necessity but mandatorily check Web Page Performance option. Once the selection is done, either click on Audit Present State or Reload and audit.
Once the process is complete, the results will provide inputs on the number of unused CSS rules. This will give you an idea about the unused CSS.
Also how to get rid of them totally since I feel like using 'defer' or
'async' is only solving the problem partially.
The recent version of Chrome (59) has brought in a new feature called Coverage (you can find this under More Tools inside the dev tools). This helps in understanding the percentage of the CSS being used in the current page and clicking on one of the results redirects to the code and marks the portions of non-executed code in red and the executed ones in green.
These inputs should help you optimize your assets and remove the unused code.
Hope this helps!
i have made a webpage and now it is "feature-complete".
As a next step i want to put some style to it.
The project is based on the Play framework and i choose SCSS as my CSS alternative (with an SBT plugin to convert SCSS -> CSS).
Every time i change some CSS i have to reload the page in the browser, which takes a while, see if i like it and keep or revert. Then start over.
This workflow does not seem right to me. How do you style a webpage built with Play (specifically: i use Play templates, so i cannot just copy every piece of HTML into a CSS editor and style everything from there)?
The best way that i found is to change the CSS directly in Chrome, remember the changes and apply them to the source file later on.
Is there a more "automatic" way of doing things? Any nice editors or browser plugins that change the source file directly? What am i missing?
What are other people, using Play framework (or other templating systems) doing?
Thank you!
Maybe you can download an extension that automatically refresh's your page every ... seconds. On this way you only have to "Alt-tab" between your code and your page.
BTW: I couldn't comment this, I need 50 reputation. Otherwise I wouldn't have commented it because this isn't really an answer but this is just my advice.
I am building my own template in OpenCart by making a copy of the default one and then making my own.
When I edit the CSS in Chrome code inspector and copy it to my stylesheet. Is it "correct" (from a web standards/web developer view) to leave the old commented code in place or should it be completely removed.
I sometimes find that unticking features in code inspector and then copying over the block of code from the Chrome stylesheet is the quickest and easiest way of doing things.
Or maybe there are better "Live CSS" tools and extensions out there?
When you deploy for production you should remove comments, and also minify your CSS. You can add a minification tool to your build process which would remove the comments and whitespace for you.
The reason is that it makes a smaller file for the end user to download. Smaller file means less bandwidth use and a faster transfer. This is especially important for mobile device users.
It should ideally be removed (and then minified et cetera as mentioned by another answer). Best practice would be to use some version control software such as Git to keep track of what is removed and added and so forth.
I have a page that calls about 32 stylesheets. On another page, it calls < 30. In every other browser both pages look fine, but on the first page in IE (8, 7), the last 2 stylesheets aren't being called and it totally messes up the layout. I'm not really sure how to get around this in drupal.
EDIT:
Also, I understand that having more than 30 is not that great, but that is how our site was developed originally. We have a bunch of themes and modules that add syleshets using "drupal_add_css".
I tried compressing the css by going to admin/settings/performance but the stylesheet link doesn't work because we are using a port number for our test site (http://mysite:123) and the link generated is http://mysite/public/css/random_string.css
You can use admin/settings/performance and set Optimize CSS to true. This will put out 1 css instead of 32+. If you are developing and want this on to work in IE, you need to clear the cache after changing your css. We tend to leave this off in development & only turn it on to test in IE or for production.
All best,
ember
Answer to Alison's comment (too long for a comment block)
Hi AlisonC,
I've never tried using a port for a site with Drupal. I'd suggest making sure your settings.php for your site are setup correctly. There may need to be a special name for your folder (see the instructions at the top of settings.php) or you may need to check the $base_url and make sure it has the port.
If that doesn't work, there's a module for caching css while developing (http://drupal.org/project/ie_css_optimizer). I haven't used it, but it may work a little differently at least for your situation. (After typing this I noticed another user also recommended it).
I've been assuming you're still developing, and I would remove the ie css optimizer module (or at least turn it off) before going live, since it's primarily a developer helper. I think this is the limit of my knowledge. Good luck!
--Ember
This is a known limitation with IE - you cannot have more than 31 stylesheets on any given page.
References:
http://john.albin.net/css/ie-stylesheets-not-loading
http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/ad1b6e88-bbfa-4cc4-9e95-3889b82a7c1d/
http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/internet-explorer-stylesheet-rule-selector-import-sheet-limit-maximum.aspx
The only real solution you have is to combine your stylesheets so you have fewer individual CSS files (use Drupal's "Optimize CSS" option). But I acknowledge this may be a pain if you're trying to debug your code, etc.
In fact, it is possible to load a lot more than 31 stylesheets into IE, but for any more than 31, you need to do it via an #import line inside another CSS file. This isn't really possible in the context of a Drupal site, where each stylesheet is added by a module, and you don't really have control of how Drupal adds them to the page.
How are they being loaded? 30 individual <link href="blahblah.css"> calls? Or from other stylesheets with #import directives? Remember that if there's a syntax error, further processing of a stylesheet will fail.
http://drupal.org/project/ie_css_optimizer
...is what we use. Theme debugging is a pain with CSS optimization turned on. D7 uses the #import method this module implements to get around the issue.
There is actually a module to deal with this. I haven't used it personally but it does have 5K+ users (Drupal 6).
What is the easiest way to do it?
I have difficulties to understand and not having now enough time to spend and study Greasemonkey properly, to just apply a PERMANENT css change to ANY website.
I thought that was more easy, to just add a CSS that would stay with the browser. But I do not find any easy/quick tool customization to just add a simple .css file to do my changes.
For example I would like to restyle Twitter, because I hate the new design, It is killing any kind of graphic personalization that I would like to have.
I need it simple, because I want to let people with not high tech knowledge, to be able to get my personalization, implement it and do it as well.
I know that this could have a security issue, but all that I want to do it is add a piece of CSS, and not additional Javascript functionality.
EDIT: Possibly that could work in all the browsers, not only Chrome and Firefox (I know that might not exist, but I would like to have an alternative for people that use IE)
I am an expert web designer, but I am not a programmer. Outside Javascript I do not script anything else.
Install Stylish. Make custom CSS file. Winning.
You're looking for the Stylish extension.
You can add a user stylesheet in several major browsers that will override the site stylesheet. It will require a good working knowledge of CSS though and for firefox you have to create the file manually in your profile.
http://www.squarefree.com/userstyles/user-style-sheets.html