In the newest release of Twitter Bootstrap (2.0) I came across this line:
border-radius: 0 \0/;
What does the \0/ do? Is the some obscure css trick or simply a typo?
https://github.com/twitter/bootstrap/blob/master/docs/assets/css/bootstrap.css#L568
Apparently, the \0/ is a construct that IE 9 ignores, but other browsers don't, so this line's there to set border-radius to 0 for IE 9 only.
The Twitter Bootstrap developers left a comment in their sass source (although, the accompanying commit message isn't exactly self-assured):
border-radius: 0 e("\0/"); // Nuke border-radius for IE9 only
Paul Irish's fairly exhaustive list of CSS browser hacks says that \0/ after an attribute is a hack that targets IE 8 and 9.
Related
According to this page:
https://caniuse.com/#search=custom%20properties
Microsoft Edge should support CSS custom properties from version 15.
I have the latest MS Edge installed on my Windows 10 and it shows the following version:
Microsoft Edge 44.17763.831.0
Microsoft EdgeHTML 18.17763
Based on that info, I assume that I'm using MS Edge version 18, which should support CSS custom properties. But it doesn't seem to support it as something like this statement is not working:
:root {
// Color definitions
--white: 255, 255, 255;
}
background-color: rgba(var(--white));
Any thoughts and suggestions would be appreciated.
I found the answer to my question.
Microsoft Edge supports CSS Custom Properties since Edge version 15.
However, if you use rgba instead of rgb, you have to set the value of a (alpha channel):
This won't work in Edge:
background-color: rgba(var(--white));
This will work:
background-color: rgba(var(--white), 1);
background-color: rgba(var(--white), 0.8);
I hope it helps others who are facing the same issue.
I know this question has been asked (Change color of mat-spinner) but I was wondering if there's been a solution to not using the deprecated ::ng-deep?
In addition, I've also tried the method suggested in the link but that doesn't work:
HTML
<mat-progress-spinner *ngIf="pending" mode="indeterminate" class="mat-spinner-color"></mat-progress-spinner>
SCSS
.mat-spinner-color::ng-deep circle{
stroke: #FFFFFF !important;
}
Thanks in advance!
::ng-deep is not officially deprecated and is contingent upon browsers removing support for it, per angular.io, until then, meaning is officially deprecated by the browsers, it should be preferred over /deep/ and >>> for broader compatibility.
As such we plan to drop support in Angular (for all 3 of /deep/, >>>
and ::ng-deep). Until then ::ng-deep should be preferred for a broader
compatibility with the tools.
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep
If your preference is to avoid ::ng-deep you will need to apply your modifications for the mat-spinner to the root styles.css in your project
in styles.css
.orange-spinner circle{
stroke:orange !important;
}
add class
<mat-spinner class="orange-spinner"></mat-spinner>
Stackblitz
https://stackblitz.com/edit/angular-czd4zq?embed=1&file=styles.css
Please note:
Per UmutEsen comment below, the correct solution is to setup a theme and leverage the color input on the mat-spinner.
https://material.angular.io/guide/theming
I am trying to debug a crashing application in Microsoft Edge, but it gives the friendly error page:
This page is having a problem loading
We tried to load this page for you a few times, but there is still a problem with this site. We know you have better things to do than to watch this page reload over and over again so try coming back to this page later.
In internet explorer there is a way to turn off the friendly error messages. Is this also possible in Microsoft Edge? I'd like to know on which line of code the problem occurs.
It seems there are none at the moment. You can use the F12 developer tools for debugging though. The friendly page includes the actual HTTP response code so you can have an idea. Also, if you require more details you can check the full details on the request/response using the F12 Network tool to get the data the server is responding with.
You are probably affected by this unclosed bug.
No easy way to fix it right now, the not friendly error message will probably not help much (as you are not getting a server side HTTP error, is just the browser that raise an error and truncate the communication).
On the other hand the developer tool will not help also: Edge "smartly" close automatically it when the error happens and if you reopen the history is empty (no way to keep it, tried all of the buttons).
I have this issue on a site I'm developing but I'm not able to understand what's happen.
EDIT - after a long time I fixed this issue in my environment. Unluckily I'm pretty sure this will not help too much other devs because the bug seems to happen for a lot of different reason, but still... that's my usecase.
What was freezing my site was a combination of CSS media-queries (follow the less used):
#media (min-width:calc(#screen-mobile-size + 1px)) {
.hero_mobile {
display: none;
}
.hero_desktop {
display: inline;
}
}
...and few lines below...
#media (max-width: #screen-mobile-size) {
height: auto;
max-height: 600px;
.hero_mobile {
display: inline;
}
.hero_desktop {
display: none;
}
}
I tested a lot of combination but there's only one rule: I can't provide both media queries, it doesn't matter what there's inside them! It simply break the browser.
In my case the fix was quite easy: just preventing the first CSS rule to be embedded inside a media query, so...
.hero_mobile {
display: none;
}
.hero_desktop {
display: inline;
}
// ...
#media (max-width: #screen-mobile-size) {
height: auto;
max-height: 600px;
.hero_mobile {
display: inline;
}
.hero_desktop {
display: none;
}
}
When you see that, try hitting F12 and in debugger tab, setting break-on-all-errors. When you refresh, the last one it breaks on before the page reloads for some odd reason and triggers that error page, is likely the thing triggering some obscure bug.
You will likely find that Edge doesn't handle jQuery("someselector:visible") and refreshes, yet it does work with jQuery("someselector").filter(":visible"), but that's likely just an obscure bug in old jQuery 1.x.
I am developing an app with jquery-mobile. (yes, and app, it'll run within cordova(aka phone gap))
On the nexus 7 (the target device for the app), The font displays for many things are way too small. I can barely read it and I'm young. Many of the users of this app will have poor eyesight.
Is there any simple way to change the font-size with jquery-mobile?
When I try to add entries in a custom css file, there are unexpected results (Formatting goes out, etc) I have also tried theme-roller, but that only allows you to change the font-family, not the font-size.
eg:
body p {
font-size: 1.5em;
}
Even just a general explanation about how to write a css file for jquery-mobile would be very helpful.
OK, I've worked it out.
In the jquery-mobile-1.2.0.css file is the styling for query-mobile. You modify this stuff.
There's some cryptic info on the jquery-mobile website that will make sense once you've read this.
So, to change the font-size for within all you go to the jquery-mobile-1.2.0.css file and add:
.ui-li p {
font-size: 1.5em;
}
It seams that most of the jquery-mobile elements have .ui- in from of their normal html tags. They have a special class or something. (If anyone wants to elaborate on this it'd be great.)
Setting global <body>'s font-size should be enough:
body {
font-size: 15px; // You can even use !important
}
I have a page with this code (generated by JSF 2.1.3 running on Glassfish 3.1.1
<a class="pagenumber"
onclick="mojarra.ab(this,event,'click',0,'main:coupon-all main:page-top main:page-bottom');return false"
href="#"
id="main:j_idt221:0:j_idt224">1</a>
This is generated from this part (inside a ui:repeat):
<h:commandLink styleClass="pagenumber">
<f:ajax listener="#{productDetailInfoView.changePage(page)}"
render=":main:page-top :main:page-bottom :main:coupon-all"/>#{page}
</h:commandLink>
Where:
:main:page-top is the ID of the top of the page navigation
:main:page-bottom is the ID of the bottom of the page navigation
:main:coupon-all is the ID of the ui:repeat that lists all the products in the page
ISSUE:
On most browsers (as usual) and also IE 7 and IE 9, everything is just fine. But on IE8 (mostly on Windows XP but probably on Vista/8 too), the browser crashes and reload the page saying it has "recovered" it (sometimes shows the "Crash report" page and ask to send report to MS or cancel).
Additional info:
I actually spent quite a lot of time debugging this, and the issue seems to be in the jsf.js (I use Stage: development to get the full version), in the ajax response part. But I couldn't find which precise part of it because after debugging the jsf.ajax.request(...) part then it's all asynchronous and I got stuck with nowhere to break-point. Sending the request seems ok as the browser crashes when this call completes.
Now the thing is that if I remove one of the element to re-render (either one of the navigation bar or the list of products), the remaining elements are rendered without error. However I need all the 3 elements rendered, not just two...
EDIT: 12/07/05
I found that a highly connected item to the issue is PIE.htc for the round corners. Many of the elements in the 3 blocks I need to re-render have styleClass that use CSS like this:
.round {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
behavior: url('../PIE.htc');
-khtml-border-radius: 5px;
}
The PIE.htc file is found and round corners are correctly displayed in IE7 and 8 as expected. However it makes the page very very slow on these IE browsers (I don't mind, I have been allowed to remove round corners for IE).
BUT the very weird thing is that if I simply remove all reference to PIE.htc in the CSS, then I still have the error. Maybe the other border-radius are creating issue. I am currently trying to remove any kind of round corner, even for all browsers and see where it leads.
My page is also XML validated.
Any help appreciated...