I'm a friend clean GUI's. Unfortunately I need to overwrite the "chrome://global/skin" stylesheets for some reason.
What's the best method, to implement different os-based stylesheets into xul-documents - eg. for GUI's like windows xp, windows aero or macosx aqua (overlay-aero.css, overlay-aqua.css...).
Does Mozilla provide any standards for os-based stylesheet-implementing?
Without really knowing how you intend to overlay the styles: yes, the usual approach would be using manifest flags. For example, if you define a style overlay in your extension's chrome.manifest file, you would do it like this:
style chrome://browser/content/browser.xul chrome://myExtension/skin/overlay-win.css os=WINNT
style chrome://browser/content/browser.xul chrome://myExtension/skin/overlay-osx.css os=Darwin
style chrome://browser/content/browser.xul chrome://myExtension/skin/overlay-linux.css os=Linux
You can also use Mozilla-specific media features to distinguish between different themes of one OS in your stylesheet. For example:
#media all and (-moz-windows-classic)
{
...
}
#media all and (-moz-windows-theme: aero)
{
...
}
#media all and (-moz-windows-compositor)
{
...
}
Sounds to me like you want to create your own Firefox Theme (essential an extension made up of CSS files and images that replace the standard look of the browser). There's a whole section about this on Mozilla Development Center: https://addons.mozilla.org/en-US/developers/docs/how-to/theme-development
Related
I have an application, which gets deployed with two themes -- "normal" and accessibility -- which are implemented by having rules
#app.default {
#import './assets/scss/app.scss';
font-family: $font-family-base;
}
#app.accessibility {
#import './assets/scss/app-accessibility.scss';
}
and binding #app's style attribute. I have a need to deploy this same application in multiple places, but with a different "normal" theme. What are the strategies to be able to choose which theme to use during build time, while preserving ability to switch to (always same) accessibility theme at runtime? This compilation is done from an ant script, so I could in principle use eg app1.scss and app2.scss files for different deployments, and then before invoking vue build, copy chosen file to app.scss. This doesn't look like a clean solution to me though, are there better options?
In Bootstrap 3 I could use something like this:
#media (max-width: 768px), (max-height: 760px) {
}
and
#media only screen and (min-width: 769px) {
}
How can I use the same feature in Bootstrap 4 syntax?
Media-queries are a part of CSS, they have nothing to do with Bootstrap. As such, it will work the same no matter what toolkit (if any) you are using.
Yes, of course. Media queries are part of the CSS stylesheet language. Bootstrap, on the other hand, is just library built of top it with utility classes that make your job as a developer easier.
EDIT :
If you wish to migrate from Bootstrap 3 to Bootstrap 4, take a look at the official migrating documentation
I would like to customise Twitter Bootstrap using SASS. I have all my SASS files in my project. I was thinking that it would be a good idea to "override" all classes I use in html by using #extend of the really same class from Bootstrap.
This would give me the ability to upgrade the Bootstrap without warring if any class name has changed. All I can even change used classes quite easily later.
My custom Sass:
...
#import "bootstrap/buttons";
.btn {
#extend .btn;
}
...
The problem here is that the import put everything what is in that file to final css. I have the question if I should customise the class namespace like this way or if it is not a good idea and I should customise the framework just using the variables and further class customisation?
Thanks,
Mateo
Overhead won't be too big and if you keep imports before your "dependency injection" it should be all ok. But i don't know how useful it is in a long run. If they change class name then the properties also change and JS works with the native classes. Also it might have some potential problems with the override priority.
I found this link on how to embed custom fonts in XAML apps. Is there some way I can achieve the same while building using JS? The following method did not work.
#font-face {
font-family: "MimicRoman";
src: url("/fonts/MimicRoman.otf") format('opentype');
}
Looks ok to me, that's how it should work. You are sure the path to the font file is correct and you did also actually use the font-face somewhere? For instance,
body {
font-family: MimicRoman;
}
Also, you are sure there are no other font-family declarations taking precedence over the declaration you've made? (this can be seen quite easily with the DOM Explorer).
If nothing else works, you might want to test some other font file, just in case that file is corrupt or something (some working examples from here, for instance).
:-moz-system-metric(touch-enabled) looks like a really useful CSS selector for working on mobile sites.
Unfortunately Webkit is dominant on mobile touch devices so does anyone know if there is a Webkit equivalent?
(Ideally it'd be good if this was managed by CSS3 media queries)
Edit: Looks like it is supported in Gecko as a media query
There's no way to accomplish this without resorting to Javascript, at present.
As #easwee said, Modernizr is a well-regarded JS library that focuses on feature detection. You can use its touch test for your use case.
If you don't need all of Modernizr's bells and whistles, you can do the following:
A) Load the following JS as early in your <body> tag as you can:
<script type="text/javascript">
if( !!window.TouchEvent ) body.className += " touch-enabled ";
</script>
B) Write your CSS. Since Gecko uses a media query to inform you of touch availability, you'll have to dupe the touch-specific CSS, like so:
BODY.touch-enabled DIV.foo
{
/* touch-specific CSS */
}
#media screen and (-moz-touch-enabled)
{
DIV.foo
{
/* touch-specific CSS */
}
}
If the per-selector code is identical in both circumstances, GZIP ought to optimize away some of the duplication. (You are using compression, I hope.)
In Ian Wessman's answer the test !!window.TouchEvent works incorrectly. In current desktop Chrome (23.0.1271.52, Linux) window.TouchEvent is a function, so Ian's code considers the browser touch-enabled.
If you want short code, it's probably best to copy-paste the relevant code from Modernizr.
Chrome is another browser that tried to implement a similar selector but unfortunately it was removed out for now.
Modernizr could be and interesting detection tool since it can detect touch events too.
http://www.modernizr.com/docs/#touch