How to target Firefox browser specifically? [duplicate] - javascript

This question already has answers here:
Targeting only Firefox with CSS
(13 answers)
Closed 6 years ago.
I have a font that renders certain characters incorrectly on Firefox. I want to change the font to something else if Firefox is detected. I tried this technique:
body:not(:-moz-handler-blocked) .altFont {
font-family: helvetica, arial, sans-serifs !important;
}
It didn't work and also on the Firefox site it says it's not recommended. I was wondering if there is any other way to check?


Use the following syntax to target any version of Firefox Browser:
#-moz-document url-prefix() {
/* Styles to be executed on firefox */
body .altFont {
font-family: helvetica, arial, sans-serifs !important;
}
}
Reference: CSS hacks targeting firefox

Related

Javascript: Change placeholder color of created input [duplicate]

This question already has answers here:
Change a HTML5 input's placeholder color with CSS
(43 answers)
Closed 4 years ago.
So i created a input using document.createElement
but i just cant seem to get my mind around changing the color of the text of the placeholder i made for it!?
How do i do this?
ive already tried doing element.placeholder.style.color element::placeholder.style.color and more!

You can use the ::placeholder pseudo-class in most modern browsers:
input::placeholder {
font-weight: bold;
font-style: italic;
opacity: 0.5;
color: #336699;
}
<input type=text placeholder="Hello World">
The pseudo-class is currently not part of a specification (well not part of a "ratified" spec) so it's often seen behind a prefix like -webkit-placeholder or -moz-placeholder. In Firefox 58 and Chrome 64 however plain ::placeholder does work.
From a userscript, you can create a new <style> element containing your rules and append that to the document body.

You can add the property to ::placeholder pseudo element.Know more here
var x = (document.createElement('input'));
x.placeholder = "Test";
document.body.appendChild(x)
::-webkit-input-placeholder {
color: green;
}

Safari compatibility letter-spacing issue with MankSans font

I'm using a custom font (Mank Sans) for a website and it should look like that:
http://i.imgur.com/llwuwRn.png
(Google Chrome, correct behaviour)
However, when using Safari, it displays weirdly:
http://i.imgur.com/3QJA87w.png
How can i fix this problem ?
Thanks.
Edit: Here how i'm including my custom font:
#font-face {
font-family:'MankSans';
src: url('#{$font-path}/MankSans.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-stretch: normal;
unicode-range: U+000D-25CA;
}

Try something with this:
letter-spacing: 2px;
Not sure how it would look in chrome though. If it does look weird try detecting safari and then setting the letter-spacing.
var isSafari = /Safari/.test(navigator.userAgent) && /AppleComputer/.test(navigator.vendor);
if(isSafari) {
//set letter spacing using jQuery or JS DOM
}
http://www.w3schools.com/cssref/pr_text_letter-spacing.asp

Looking at a few other options as you mentioned my previous didn't work.
Option A:
Font-format could be wrong. .ttf is the standard for Safari and Android devices. You can check the details in this question: Safari font rendering issues
Option B:
This answer to the question above has a few more options incase it's a text-rendering issue: https://stackoverflow.com/a/31218373/4314753
Option C:
A few people have said that there is a problem with safari's rendering and what fixed their problems was to define the font-weight: font-weight: 400
Option D:
If it ultimately is a rendering issue and can't find another solution, a hack could be to have an image replace the text even if it isn't as friendly as it could be.

How can I recognize Safari version in javascript? [duplicate]

This question already has answers here:
How can you detect the version of a browser?
(34 answers)
Closed 6 years ago.
Can I someone recognize version of Safari browser in js or jQuery? I am not looking for webkit version but for version of Safari (for example: 5.1.7).
I need to hide some element for Safari which is less than v7 :(

This hack worked out by combining multiple other hacks is for 6.1+:
/* Safari 6.1+ (9.0 is the latest version of Safari at this time) */
#media screen and (min-color-index:0)
and(-webkit-min-device-pixel-ratio:0) { #media
{
.safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
}}
Below are hacks that separate 6.1-7.0, and 7.1+
These also required a combination of multiple hacks in order to get the right result:
/* Safari 6.1-7.0 */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-color-index:0)
{
.safari_only {(;
color:#0000FF;
background-color:#CCCCCC;
);}
}
Here is one for Safari 8 and newer:
/* Safari 7.1+ (9.0 is the latest version of Safari at this time) */
_::-webkit-full-page-media, _:future, :root .safari_only {
color:#0000FF;
background-color:#CCCCCC;
}
refer this link:
https://jeffclayton.wordpress.com/2015/04/28/css-hacks-for-safari-6-1-7-and-8-not-chrome/

Use
if(speechSynthesis){
//code to be run in Safari 7+
}else{
//code not to be run in said versions
}
This should work, as speechSynthesis was added in version 7.
Source: http://CanIUse.com/#compare=safari+6.1,safari+7

Jquery vs Javascript: getting css style object shows different result [duplicate]

This question already has answers here:
How To Get Font Size in HTML
(9 answers)
Closed 6 years ago.
I have the following code:
In my html
<h1 id="heading">My Site</h1>
In my css
#heading{
font-size: 16px;
color: #333333;
}
When in console I do
document.getElementById("heading").style.fontSize
it gives: ""
but when I do
$("#heading").css("fontSize")
it gives: 16px
Even if I print the whole style object, vanilla javascript shows all blank values but jquery shows correct results.
Why is there a difference between the two?

Because jQuery's css function gives you the computed style, whereas Element.style.fontSize gives you only styles that have been applied inline. The vanilla equivalent to the jQuery code would be this:
var heading = document.getElementById("heading");
window.getComputedStyle(heading).getPropertyValue('font-size');
This will give you the actual font size of the element, after any CSS has been applied.

document.getElementById("heading").style.fontSize
Will only get styles that are set inline like:
<h1 id="heading" style="font-size:16px">My Site</h1>`
To get the styles set from a stylesheet use getComputedStyle:
window.getComputedStyle(document.getElementById("heading"), null).getPropertyValue("font-size");
With inline styling:
console.log(document.getElementById("heading").style.fontSize)
<h1 id="heading" style="font-size:16px">My Site</h1>
With stylesheet styling
console.log(window.getComputedStyle(document.getElementById("heading"), null).getPropertyValue("font-size"))
#heading{
font-size: 16px;
color: #333333;
}
<h1 id="heading">My Site</h1>

JQuery Mobile - Override font-family themes for the whole body

I recently added jQuery mobile to my website.
However, the jQuery theme broke my previous fonts. While most of my page works great, especially the nice jQuery Mobile sliders, I am having a real problem with the fonts.
I have custom fonts set and they work correctly without the jquery mobile css. However, once I include the jquery mobile css it overrides my fonts.
I have tried adding data-role= "none" to the body and the divs but that did not help.
I have also tried adding data-theme = "none" but that also does not help.
Is there a way to disable jQuery custom font-family theming on the body of my page?
Thanks for the help.

Here is my CSS for replacing the entire applications font with Roboto, the Android 4.0 ICS font.
#font-face {
font-family: 'RobotoRegular';
src: url('../font/roboto/RobotoRegular.eot');
src: url('../font/roboto/RobotoRegular.eot?#iefix') format('embedded-opentype'),
url('../font/roboto/RobotoRegular.woff') format('woff'),
url('../font/roboto/RobotoRegular.ttf') format('truetype'),
url('../font/roboto/RobotoRegular.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Android jQM Font Style Overrides */
body * {
font-family: "RobotoRegular" !important;
font-weight: normal !important;
}
You may have to target specific elements too if the above is not enough. I had to also include the following:
.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-bar-a,.ui-body-a,.ui-btn-up-a,.ui-btn-hover-a,.ui-btn-down-a,.ui-body-a input,.ui-body-a select,.ui-body-a textarea,.ui-body-a$
font-family: "RobotoRegular";
}
I hope you come right. Good luck.

I would inspect the element and find out exactly where the fonts are being specified for example I just found that font's are specified here:
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button
So you can override that in your own stylesheet by specifying the same selector and presenting your own fonts :)

From what I understand... jQuery mobile might just send his own css fonts into your mix. If you have a css file with the font set :
Try some testing by adding !important for your font styles.
Hope this will help you figure out a solution :)

Thanks to the help by agrublev and darryn.ten the following worked for me:
Here are examples to change the shadow of the body and fonts:
.ui-body-c,.ui-dialog.ui-overlay-c{
text-shadow: 0pt 0px 0pt rgb(0, 0, 0);
}
.ui-body-c, .ui-body-c input, .ui-body-c select, .ui-body-c textarea, .ui-body-c button{
    font-family: Helvetica, Arial, sans-serif, Verdana;
font-size: 12px;
text-shadow: none;
color:black;
}

creat your own css for jquery mobile and override font family give your own font family

jquery mobile uses themes. Hit http://themeroller.jquerymobile.com/
set the font in the "global" tab (for me: Raleway, Verdana, etc), download and install the theme and you're set.
For jqmobile, you need to use your theme css, jqm icons, and jqm structure INSTEAD of the usual single jqm css.
overriding stuff in css may get you in different trouble with different browsers... And that's NOT the point with jquerymobile.

Categories