May be it is a common way of working of libraries but i dont understand why i have so many style elements in my index.html where i use angular material. Here you see my header element that contains different classes for angular material components.
Is that working correctly? Is it slow downing my html file?
Yes, it's normal.
Each registered theme results in 16 <style> tags being generated.
And it's not slowing down your website. As a matter of fact, from all forms of adding CSS to a page, <style> is fastest.
Related
I am implementing very basic tables following the examples given in the official docs.
In those examples, the tables have nice styling which is seemingly localized to each sample table. The main style I want to use is mat-elevation-z8 (from what I can tell). Unfortunately, when I embed that table in my page it styles the entire page, all the way up to the body. Here is a stackblitz which shows what I mean:
https://stackblitz.com/edit/angular-5oe5jz
The divs above and below the table are styled to match the table. I want the table to be styled in isolation as in the samples. Is my only option to go override every property I don't want to be affected by Material?
1) You don't need to override every property, but you just use material CSS classes where you require otherwise don't add the classes.
2) For example in your stackblitz link the page is looking with material design, because you applied class 'mat-app-background basic-container' to the div in your index.html file. so that the entire page is looking with material design.
3) Remove that mat-app-background basic-container from index.html file, and use material CSS classes to for tables only.
4) I have just updated the index.html file for your reference. check here
I'm using google's css package in my google script app:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
However, I would like to use my own css for styling table elements. The only problem is that google's css package contains css for table elements, and it seems to be overwriting my custom css except it's not doing it consistently. For example, on my laptop the web app uses my table css and for my desktop it uses google's css package (both running windows 10 using chrome--although the desktop's chrome might not be updated). Is there any way to ignore google's css for tables or even to know for sure which styling will supersede the other? What if I were using two third party stylesheets that both defined css for tables? How could I specify which one I wanted for a specific selector?
If you want to overwrite styling of other CSS files make sure to include you CSS file after the ones you want to override. And learning about CSS specificity helps alot.
EDIT:
I think this link may help you: https://css-tricks.com/specifics-on-css-specificity/
I'm learning AngularJS & Material Angular Design. But Material Design is including CSS codes between <head> tags. I attached a screenshot.
How will I remove these codes from head tags and include in a css file?
These tags are generated by angular-material library at runtime. So you cannot put these in css files.
Also, there is no point of doing this. It is handled by angulat-material library automatically for you.
I am working on changing the styling of pages within a learning platform. The platform allows for the user (me) to use my own CSS to change the styling of pages I myself have created. The problem is that the platform uses som predefined (and unknown to me) CSS before appending their CSS with my CSS. I don't have access to the actual HTML.
Here is the problem: I would like to use web fonts in my CSS. I have therefore been trying to use #import at the start of my CSS. My CSS is appended too late to the predefined CSS for #import to take effect. The only code I can give the system is my own CSS so I can't directly edit the html head to link to the web fonts.
Is there any other way to add web fonts to my CSS with said CSS being the only code I can write? Is it possible within CSS to append links to the html head? The support team of the platform consider this is a bug but don't offer a workaround. It would be nice not to have to wait for an update if possible.
I'm building an application in GWT and have a skin from my graphic designer which I've plugged into the app using UIBinder and it works beautifully. Now I want to bundle all the images using ClientBundle.
Mayne of these images are used in the css file e.g.
.nav{background:url(nav_bg.jpg) left top repeat-x; height:27px; clear:both;}
Before this css I have defined a tag to include the bundle.
How can I change the css entry so that it uses an ImageResource from my ClientBundle? I guess I can do inline styles for all the html tags but that's horrible separation and a lot of extra work.
I have successfully used ImageResources in the html part of the uibinder file (e.g. in a ) but I cannot see how to do this in the css. I have even inlined the css in a block but I still don't see the correct way to do this.
Any suggestions?
ClientBundles can now be used to host CssResources as well.
These CssResources are CSS files with some extra functionality.
The docs of GWT describes what you need in the section about ImageSprites.
I ended up skipping GWT css and image bundling altogether. Instead I've had my carve done using a css sprited image block made by the design/carve team. This has these advantages.
1/ Much less css porting since I can plug the html directly into ui binder and use the css tags from the carve i.e. not using uibinder css. As long as the html structure matches the carve then this is a lot less work than migrating all the css into gwt css.
2/ It also allows me to use svn/diff when applying changes - this was not possible when using gwt css/image spriting.
3/ I can easily put the image/css files on a CDN since the load tags are in the host page and don't suffer from Same Origin restrictions. FYI : yes I know about the XS linker as another way to do this.
It stops being useful when the carve uses css for positioning and I want to use LayoutPanels but that's not too bad as long as I request that the layout css is separate from the style css.
So in the end I discovered that, when working with design/carve from a third party, it's much easier to avoid using gwt css/images but to reproduce the same benefits using traditional css spriting and minification. I hope this helps someone.