I am making a website, but an element needs margin in Chrome and other browsers, but not in safari. So I want to add a css line to fix it, but I can't find any method to add css for safari 3+ only.
I believe this should work
Fiddle : http://jsfiddle.net/kHFjM/1/
var userAgent = navigator.userAgent.toLowerCase();
if (userAgent .indexOf('safari')!=-1){
if(userAgent .indexOf('chrome') > -1){
//browser is chrome
}else if((userAgent .indexOf('opera') > -1)||(userAgent .indexOf('opr') > -1)){
//browser is opera
}else{
//browser is safari, add css
}
}
here is the link to detect the browser version
https://stackoverflow.com/a/5918791
jQuery integrated solution:
<script type="text/javascript">
$(function () {
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
$("body").addClass("safari");
}
});
</script>
<style>
div {
margin:20px;
}
.safari div {
margin:0;
}
</style>
Pure JS integrated solution:
<style>
div {
margin:20px;
}
.safari div {
margin:0;
}
</style>
<body>
<script type="text/javascript">
if (navigator.userAgent.indexOf('Safari') != -1 &&
navigator.userAgent.indexOf('Chrome') == -1) {
document.body.className += " safari";
}
</script>
</body>
This is not possible since you would be applying the same property to Chrome as well. As Chrome, and Safari both use the -webkit- prefix.
But you could do this in PHP.
<?php
$browser = get_browser();
if(strtolower($browser->browser) == 'safari') {
echo '<link href="safari.css" rel="stylesheet" type="text/css" />';
}
?>
Replace safari.css with your own stylesheet. Credit to #theorise
In safari 9.0 (only, not > 9.0) you can do it now in CSS with this nice hack. You don't need any JS code. I did it and its working fine for me. Use this hack:
#supports (overflow:-webkit-marquee) and (justify-content:inherit) {
/* type your custom css code here */
}
The reason it is working is: Safari 9.0 and above have feature detection. So by detecting a feature which is exclusively for Safari you can detect Safari. overflow:-webkit-marquee and justify-content:inherit are exclusively for safari. Thats why we can detect safari with this simple CSS hack.
This worked for me for old and new safari browsers:
#media not all and (min-resolution:.001dpcm) {
#supports (-webkit-appearance: none) {
/* Safari Only CSS here */
}
}
Instead of adding more code to fix your problem, since the default margins are different, you could try resetting all off the margins and paddings of surrounding elements to 0 first before changing it. That could solve your issue.
It's completely a personal preference, but I start all of my webpages with:
*{
margin:0;
padding:0;
}
I've never had any cross browser issues regarding margins or padding while doing this.
There is a question similar to this on the CSS-Tricks forum. But the answer is basically, nope.
You could attempt user-agent sniffing server side or with JavaScript and then add a class to the html (like for old IE versions in HTML5 BoilerPlate).
Hope this helps.
--beaten to it by the guys above and below!
I have tried almost all of the above-suggested solutions, but nothing is working around until I saw a piece of code in my says:
#-webkit-keyframes fadein {
//code here
}
And it did the job and applied the required CSS for:
Safari, Chrome and Opera > 12.1
Hope this can help someone.
Related
Issue
I am applying a class "error" to an input tag when a user changes the text in the textbox. This class is used to change the background color of the textbox and keep a record of what has been changed. This works perfectly in other browsers, but when a user selects an option from an autofill box in chrome, the class is still applied, but chrome's user agent style still trumps my style, preventing the correct background color from being applied.
To make matters more confusing, when I inspect the page and look at computed styles, chrome strikes through the style that should be overridden, but still says that it is the style being applied:
I Have Tried
increasing the specificity of my style rule.
overwriting chromes selector (this throws a warning that ":-internal-autofill-selected" is not a valid pseudo-class):
input:-internal-autofill-selected{
background-color: none !important;
}
Edge and Firefox (works as intended)
Clearing the cache, restarting the browser (although, maybe I missed something?)
one solution I found was to disable autofill for the page, but that will not work because autofill is very helpful for this textbox
Reproducible Code
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
function ChangeColorRed(e) {
e.target.classList.add("error");
}
$(document).ready(function () {
var txtboxes = document.getElementsByTagName('input');
for (var j = 0; j < txtboxes.length; j++) {
txtboxes[j].addEventListener('input', ChangeColorRed);
}
});
</script>
<style>
#txtOrderNumber.error, #txtItem.error{
background-color:#FFCCCB !important;
}
</style>
</head>
<body>
<form id="form1" runat="server">
Order Number:
<input type="text" id="txtOrderNumber" class="form-control inputText"/>
Item#:
<input type="text" id="txtItem" class="form-control inputText"/>
<input type="submit" name="btnSelect" value="Select" id="btnSelect" class="btn btn-secondary"/>
</form>
</body>
I suspect the answer to this is either something really simple that I am missing or some strange chrome phantom error. Any insight into what I might be doing wrong would be greatly appreciated.
UPDATE
CBroe supplied a workaround in the comments that is the best solution so far. Updating the script to the code below, makes Chrome stop thinking this field was auto-filled
function ChangeColorRed(e) {
e.target.classList.add("error");
}
function BackgroundColorWorkaround() {
document.querySelector('#txtOrderNumber').value = document.querySelector('#txtOrderNumber').value
document.querySelector('#txtItem').value = document.querySelector('#txtItem').value
}
$(document).ready(function () {
var txtboxes = document.getElementsByTagName('input');
for (var j = 0; j < txtboxes.length; j++) {
txtboxes[j].addEventListener('input', ChangeColorRed);
txtboxes[j].addEventListener('blur', BackgroundColorWorkaround);
}
});
I'm trying to build a custom HTML element. The problem is that I'm not able to apply styles to the Shadow DOM elements provided using external CSS. The code is working in Chrome but not in Firefox.
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
console.log('Element creation started...');
var inputTextElement = document.createElement('input');
inputTextElement.type = 'text';
inputTextElement.className = 'simpleElem';
// Shadow DOM root
var shadowRoot = this.createShadowRoot();
shadowRoot.appendChild(inputTextElement);
console.log('Element creation ended...');
};
var SimpleElement = document.registerElement('simple-element', { prototype: proto });
simple-element {
}
simple-element::shadow .simpleElem {
height: 30px;
margin: 0px;
padding: 0px;
width: 180px;
}
<!doctype html>
<html>
<head>
<title>HTML5 | Custom Elements</title>
<link type="text/css" rel="stylesheet" href="simple-elem.css">
<script type="text/javascript" src="simple-elem.js"></script>
</head>
<body>
<simple-element></simple-element>
</body>
</html>
Not able to figure out what is wrong with Firefox.
As noted by Gábor Imre, Shadow DOM is not enabled by default in Firefox because it is still under development. You can, however, use a polyfill to get pretty good Shadow DOM behavior in all browsers that don't support it.. If you do, you'll then need to use polyfill-next-selector to obtain the behavior you want.
Update: FF Shadow DOM support has arrived.
Firefox has no Shadow DOM support yet, see CanIUse.com. I recommend sticking to Chrome.
EDIT: FF Nightly has some support, it can be enabled manually.
While Shadow DOM in general has been supported in Firefox for a while now (invalidating the two other answers), with Firefox 72 you can now target custom/Shadow DOM elements via the part attribute and ::part() pseudo-element, respectively:
//this JS boilerplate adapted from MDN
let template = document.getElementById("simple-element");
globalThis.customElements.define(template.id, class extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content);
}
});
simple-element::part(shadow) {
height: 30px;
margin: 0;
padding: 0;
width: 180px;
background: green;
}
<template id="simple-element">
<div part="shadow">Hi</div>
</template>
<simple-element></simple-element>
Obviously this code looks a lot different from what your question code looks like because the Shadow DOM spec/implementations have changed quite a lot since 2014.
I want to make website non-responsive, but using col-md, col-lg and col-sm, it have to be non-responsive and ignore #viewport ( browser resize ) width , but have to be responsive on mobile and tablets.
I need to use col-md , sm, lg to make it responsive on mobile and tablets, but my website collapses depending on Browser #viewport because of I can't use col-xs for all columns.
Is it a possible thing to sort out ?
Thanks
Do something like this,
<script type="text/javascript">
$( document ).ready(function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your stylesheet url') );
}
});
</script>
You'll have to load jQuery. In head tag.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
Try this:-
#media screen and (min-width:768px){ /* or whatever width you prefer for min-width of desktop view */
.container{
min-width:970px; /* or whatever width you prefer for desktop view */
width:970px; /* or whatever width you prefer for desktop view */
}
}
What it should do is, it will not resize the container until the screen is 768px wide. You can change this media screen min-width as per your requirement. Once the device or browser's with reduces beyond 768px, it will start the responsiveness automatically.
Above CSS is just an example. You don't need any JavaScript to deal in your situation.
Hope it helps.
I would load or not load responsive styles based on whether or not it's a touch device. The styles for mobile should be just the site with responsive css. Then a duplicate of that is used for non-touch devices but bring your columns out of the min-widths and set a width on your container. There's other ways of doing this, like loading another css file if it's touch and just keeping the desktop styles for all device, but the css for responsive is loaded after the desktop so that it is the last in the order.
MINI DEMO: http://jsbin.com/wuqita/1/edit
/* __________________ SUPPORTS TOUCH OR NOT __________________*/
/*! Detects touch support and adds appropriate classes to html and returns a JS object | Copyright (c) 2013 Izilla Partners Pty Ltd | http://www.izilla.com.au / Licensed under the MIT license | https://coderwall.com/p/egbgdw */
var supports = (function() {
var d = document.documentElement,
c = "ontouchstart" in window || navigator.msMaxTouchPoints;
if (c) {
d.className += " touch";
return {
touch: true
};
} else {
d.className += " no-touch";
return {
touch: false
};
}
})();
$(document).ready(function () {
if ($('html').hasClass('touch')) {
$('#desktopcss').prop('disabled',true);
}
if ($('html').hasClass('no-touch')) {
$('#responsivecss').prop('disabled',true);
}
});
CSS files linking and ids:
<link id="responsivecss" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link id="desktopcss" href="//bombdiggitydesign.com/jsbin/test.css" rel="stylesheet" type="text/css" />
I am working on this website formationMTL
The website looks great on all browsers exept IE.
Here's a snapshot from IE
I am new to this and don't know how to even tackle this issue. Any suggestions?
Note: IE version: 7.0.6002.18005
Thanks,
Hate to break it to you but, even though there are long, drawn-out solutions you could spend days testing and adding conditionals for in your code (and for you I mean, literally days non-stop), it would be much more logical to put this in your <head> and call it a day:
<!--[if IE lt 9]>
<script type="text/javascript">
var $buoop = {
vs: {
i: 8,
f: 5,
o: 12,
s: 5,
n: 9
}
};
$buoop.ol = window.onload;
window.onload = function () {
try {
if ($buoop.ol) $buoop.ol();
} catch (e) {}
var e = document.createElement("script");
e.setAttribute("type", "text/javascript");
e.setAttribute("src", "//browser-update.org/update.js");
document.body.appendChild(e);
}
</script>
<![endif]-->
Browser-Update.org (even Hawaii.gov uses it)
Try using a reset.css that can reset the default browser CSS Behaviours before you apply your CSS, maybe it solve your problem, the reset.css can be found here: http://www.cssreset.com
Try adding a clearing element after the downncontent div
<div class="downcontent">...</div>
<div style="clear:left;"></div>
When working with floating elements, it is important to use a clearing element afterwards to help the browser render the elements in the correct order and placement. IE is certainly guilty of doing this incorrectly.
The problem is with the clearing. Do this:
CSS
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; // For IE 6/7 (trigger hasLayout)
clear: both;
display: block;
overflow: visible;
}
HTML
<div class="subcontain">
[...]
<div id="banner"></div>
<div class="clearfix">
<div class="downcontent"></div>
<div class="searchcourse"></div>
</div>
</div>
Unrelated, but might help you in the future. Replace this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
With this:
<!DOCTYPE html>
<html>
This will make your markup less likely to trigger Quirk Mode on IE.
Googled this a lot and didn't get any useful hint/solution.
I have this simple html page including some CSS styles, jQuery, jQuery-ui and obviously Fabric.js; on document.ready I launch an ajax call and render something on the canvas. Until now everything seems fine but when a I need to catch some mouse events I get nothing. This behaviour is shown only on Chrome (current version 25.0.1364.97); everything works fine on Firefox or Internet Explorer (v. 9).
Here's some of the js code:
$(document).ready(function() {
//setup canvas etc.
eCanvas = new fabric.Canvas('EViewport', {
backgroundColor: 'rgba(255, 50, 50, .3)',
selection: true,
selectionColor: 'blue',
selectionLineWidth: 2
});
EViewport = $("#CanvasContainer");
viewW = EViewport.width();
viewH = EViewport.height();
eCanvas.setWidth(viewW);
eCanvas.setHeight(viewH);
eCanvas.observe('object:selected', function(options) {
if (options.target) {
console.log('an object was selected! ', options.target.type);
}
});
eCanvas.observe('mouse:down', function() {
console.log('mouse click! ');
});
eCanvas.on('mouse:down', function() {
console.log('mouse click! ');
});
eCanvas.on('mousedown', function() {
console.log('mouse click! ');
});
//... render some rectangles and stuff...
});
And here's the html structure (notice that Eviewport.js file contains previously pasted code):
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="baseCss/jquery-ui.css" type="text/css">
<script type="text/javascript" src="baseJs/jquery.js"></script>
<script type="text/javascript" src="baseJs/jquery-ui.js"></script>
<script type="text/javascript" src="Eviewport.js"></script>
<link type="text/css" rel="stylesheet" href="Eviewport.css">
<script type="text/javascript" src="baseJs/Fabric.js"></script>
</head>
<body>
<div id="MainContainer">
<div id="CanvasContainer">
<canvas id="EViewport">
Canvas is not supported
</canvas>
</div>
</div>
</body>
</html>
Selection features don't work with chrome either while they work on IE and Firefox.
I tried many things (as you can see I tried changing canvas.observe with canvas.on), changed jQuery and jQueryui versions but nothing changed.
Using developer tools on Google Chrome doesn't show much.
There's no z-index on html elements given by CSS, and I tried disabling different js and CSS but that didn't solve the problem.
I noticed that the problem shows also shows on the demo page of Fabric.js (just tried http://fabricjs.com/stickman/); render works, effects also but no mouse events or selection working.
Is this a bug?
Ok, finally found what's not working.
I have a Wacom device attached and looks like latest Chrome version sets a flag about "touch enabled device" and that's breaking my code.
A simple solution can be changing chrome flags (chrome://flags/)
Related posts:
https://github.com/kangax/fabric.js/issues/450