I have a .scss file which is holding all the application css classes. There is an admin portal which user can set the properties like font size, text color e.t.c. When the application loads, client will be receiving these properties in a form of a key value object.
ex:
properties:{
'font-size':26,
'color':'blue'
}
I want to override these properties with defaults holding in my scss file.
I searched a bit and found that css variables is one of the option. But with that we will loose the support for IE11 as it does not work in IE 11.
Is there is any other way where i can look in to. Or is there any way where I can build the css file when i receive this object response from server.
Kindly help and suggest some approaches to deal with this.
Related
The browser I'm using, qutebrowser, allows me to set a CSS file that applies those styles to every web site (but doesn't allow you to set it per page/domain, as far as I can tell), so I downloaded a dark theme CSS stylesheet from solarized-everything-css, but it seems the result on some website is unsatisfactory.
Therefore, I'd like to know if CSS offers a way to not apply a sequence of rulesets (in my case it'd be the whole stylesheet) on some domains. Something long the lines of
#this-web-site-is-NOT-in-the-black-list-in("list.txt") {
/* the content of the dark theme CSS goes here*/
}
If it was possible, then I would add each problematic site to that sort of blacklist.
CSS itself cannot do this, because CSS is designed to apply only to a site from which it is loaded within the browser environment. Normally this happens by looking at resources listed in an HTML file's <head>, but can also happen from JavaScript injection via userscripts/addons/extensions a user has installed in their web browser.
So you need to use a 'user' style for this, which means you need to use a web browser that supports this. If the browser you're using (qutebrowser) does not allow you to set specific domains/URLs, then this will not be possible for you without creating your own user script (written in JavaScript, presumably) to apply this functionality on top of what the browser supports natively.
This is one of those "what should we do about this"-questions. As you know, web components are supposed to be small, contained applications for websites. However, sometimes these needs to be styled depending on the site they're embedded on.
Example: "Sign up to our newsletter"-component. This component would have a few key items:
An input box
A button
Maybe recaptcha
A method that talks to your service once the button is pressed (passing in the email)
We're going to use Google and YouTube as examples. Google's color scheme is blue (let's imagine that) and YouTube's color scheme is red. The component would then be something like <newsletter-signup></newsletter-signup> on the page you're embedding it in. Both Google and YouTube have this.
The problem comes in, when the component needs to inherit the styles from Google and YouTube. A few deprecated CSS selectors would be great for this, because Google and YouTube's style sheets could simply enable colors for the Shadow DOM, so we wouldn't have to copy/paste the styles. The component should theoretically not know anything about the styles from the host, because we want it to inherit from the host (Google and YouTube).
At the moment, I'm creating a web component using Angular 6, which has a lot of styles, because it has a lot of elements. I'm copy/pasting styles, Bootstrap, icons, and so on from the host site, then styling them based on <newsletter-signup brand="google"></newsletter-signup>. So if the brand is Google, the colors should be red, for example.
This is really bad, because of a few reasons:
Styles have to be updated on both the web component and on the host
Duplicated code is never a good idea
If all the styles are copied 1:1, the amount of bytes required for styles is doubled
How would I, as a developer, take this into account? How do I make styles on the host, then apply them on my web component (call it inheritance)? I'm sure someone has had the exact same problem with Shadow DOM as I am experiencing. Thanks for reading.
I realize you do not want to write same kind of rules for your common component(selector)
i.e. you want to do styling as where your common selector is placed.
Things you can do to handle this:
1. Create your own logical css framework
Write most commonly used CSS rules in global css.For example if you have integrated bootstrap and you want to override bootstrap, you will write most common overrides in app.css which overrides bootstrap.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles/app.scss"
],
This app.scss should be written in way to which you can override.
Send Rules as input
send custom rules Obj and use in elements you want to override.
<newsletter [input]="customRulesObj"></newsletter>
component.ts
customRulesObj = new CustomRulesClass();
customRulesObj.color = 'red';
You can send rules in input in various component by creating a common class
as you know where you are embedding this component.
Extend this component from a common component
If you are too concerned for css you can extend your component from a common component which provides you with css logic as per need.
export class NewsLetterComponent extends CSSComponent implements OnInit
{
}
css-component.ts
In this component can logically define css as per host, current routerlink and
other multiple if else condition.
You can define rules by switch case conditions and bind those rules to component you have extended.
One of the biggest must-do's of web components is: My host (page where I'm embedding my web component) should not depend on the web component nor know about the web component.
What this basically means: Styles of my web component should not be shared with the host.
If my host decides to update the styles, it should affect my web component. Not the other way around. To solve this, I imported the external styles from my host directly inside the CSS file using #import. Here's an example:
import url("https://my-host.com/styles/core.css");
my-component {
//all styles goes here
}
I did this using SASS but can be done using regular CSS.
This is not a great solution at all, but it does what I want: Inherit the styles from the host. Although I would have to import every stylesheet there is, it still works.
A downside to my solution: When I load the page, it will send a request to the style from the <link> element inside the <head>-tag my host, but also to the style inside my import. So the styles are loaded twice. For our application, which is internal use only, it doesn't matter if we request additional ~200 KB data.
This question is a few years old and the situation has changed. The way to share styles with web components is now to use link tags to a shared stylesheet.
Inside each component:
<link rel="stylesheet" href="https://my-host.com/styles/core.css">
Reference:
https://github.com/WICG/webcomponents/issues/628
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.
I'm using GWT in a new project that I'm working on and I'm facing a problem. Some of the CSS rules were defined into the XML file and not into a CSS file.
The problem is that when GWT compiles the code, my name classes defined into my XML file are changed to a new random ID.
Stuffs like GKA-VPPBPE or GKA-VPPBLE
Is there is a way to keep the original name instead of the generated ones?
The generation of obfuscated css classnames is a feature.
GWT has enabled CSS obfuscation activated by default. This will help reduce the download size and also reduce collision of css-classnames.
You can disable this in general:
<set-configuration-property name="CssResource.style" value="pretty"/>
Or for some classes only:
#external .myClassName
Look here for some more information
https://vcfvct.wordpress.com/2013/10/04/disable-obfuscation-in-gwt-css-resources/
It seems it isn't possible at runtime to change styling defined in CSS files, ex.: colors. This is seemingly because the CSS files are compiled into SWF.
Is it possible to externalize styling information in CSS (or any other format) without compiling it to SWF file so that it can be changed easily at runtime just as normal CSS can be changed when it is used in HTML.
You can do this in Flex 3, Loading an external CSS file and hopes similarly can be used for Flex 4 as
Load CSS File using URLLoader
List item Parse it with StyleSheet parseCSS function
Assign it to Application
Also see StyleSheet
Hopes that helps
We eventually found a way of applying styling, without having a compilation step. We are sticking to basics.
We defined a configuration XML file and using onPre method of mx:application we read this XML file and applied the styling to UI components.
This approach ensured that the styling is centralized at least at application level and most importantly it is now possible to quickly try out new styles by changing the configuration file and refreshing the page.
I suppose this documentation answers all your questions. You have to use some CSS at compile time but you can load and apply another one at runtime without problem.