Max--height in media queries Bootstrap 4 - twitter-bootstrap-3

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

Related

Bootstrap 3.3.1 carousel animation not working with LESS

I am working on a Bootstrap template that I am building on the Bootstrap 3.3.1 LESS files compiled on the go (as a temporary solution) with less.min.js. The problem is when I try to flip slides of the Bootstrap carousel they do so with no animation. Chrome Dev tools gave me this:
.carousel-inner > .item {
transition: transform 0.6s ease-in-out;
backface-visibility: hidden;
perspective: 1000;
}
As you can see there is not -webkit-transition line for some reasons.
Switching to bootstrap.css or replacing the carousel.less file with that from v3.3.0 resolves the issue. Is it a Bootstrap issue or is it something on my side?
You should run the autoprefixer (since version 3.2), also see https://github.com/twbs/bootstrap/issues/15203
Cause your are compiling client side, you can NOT run this plugin. Alternatively you can use -prefix-free.
Notice that the autoprefixer is part of TB default build process now.
Thought they were supposed to use mixins internally until v4
Yes, probably. But i seems new added code is not longer prefixed by mixins. Code that used a mixin before v3.2. already, are not replaced before v4.
You can see the above in the less/carousel.less file, that contains the following code (reflecting your issue):
// WebKit CSS3 transforms for supported devices
#media all and (transform-3d), (-webkit-transform-3d) {
transition: transform .6s ease-in-out;
backface-visibility: hidden;
perspective: 1000;

Twitter Bootstrap SASS Customise

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.

Loading custom font in Windows 8 Metro App

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).

Implement OS-based stylesheets in XUL

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

Webkit equivalent of :-moz-system-metric(touch-enabled)

:-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