I have included this script from Rog.ie (http://archive.is/Zf3Pd)
<script>
var b = document.documentElement;
b.setAttribute('data-useragent', navigator.userAgent);
b.setAttribute('data-platform', navigator.platform );
b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');
</script>
and the following data useragents (6,3 is windows 8.1 and 6.1 is windows 7):
html[data-useragent*='MSIE'][data-platform='Windows NT 6.3']
.example {
color: black;
}
html[data-useragent*='MSIE'][data-platform='Windows NT 6.1']
.example {
color: white;
}
However regardless of whether i'm on windows 8.1 or 7 it is only working for which ever useragent is at the bottom i.e with the above example the color is white, but if is reversed as follows the color is black.
html[data-useragent*='MSIE'][data-platform='Windows NT 6.1']
.example {
color: white;
}
html[data-useragent*='MSIE'][data-platform='Windows NT 6.3']
.example {
color: black;
}
I am testing these user agents on my laptop browsers developed through dreamweaver so i am not testing on a server yet. Is the data user agent code not working because the site is not yet on a server or am i doing something wrong?
Thank you
Related
I am creating a Bash program using Replit and it needs to play sound. What should I do?
I surfed through the docs but they were of no use.
Create a secret called VNC_ENABLE_EXPERIMENTAL_AUDIO with a value of 1
Trigger the VNC screen by opening a native desktop window like xeyes in the background
Create your audio
Tick the checkbox at the bottom right corner of the VNC view
Steps 3 and 4 are interchangable, but to play sound browsers require a user interaction and Replit solves it this way.
Example replit.nix file
{ pkgs }: {
deps = [
pkgs.bashInteractive
pkgs.speechd
pkgs.xlibs.xeyes
];
}
Example main.sh file
{ pkgs }: {
deps = [
pkgs.bashInteractive
pkgs.speechd
pkgs.xlibs.xeyes
];
}
Resulting Replit (requires CORS JS iframe embeds)
<iframe src="https://replit.com/#cachius/AudioInBash?lite=1&outputonly=1" style="position: absolute; height: 100%; width: 100%; border: none"></iframe>
Put
audio = true
into the .replit file
How can I have multiple rows with tabs on Firefox 57+, after the add-on Tab Mix Plus no-longer works (all legacy extensions are dropped with Firefox 57). Perhaps I should just wait?
This is perhaps the only functionality which I couldn't find in Opera or Chrome (and Chrome has some privacy issues), the last time I tested them. So it seems I have a few options, not just a single one.
As suggested in this thread, I can downgrade to FF 52 ESR (with possible issues...) or use a nightly build...
Another possible option is to use a [FF Current Profile Folder]/chrome/userChrome.css file (folder may need to be created), where I can place some code. Here is what I tested under FF 57, using 500+ tabs:
(EDIT 1: Added few css rules to hide some spaces/buttons, similar to the R4zen's answer, as mine contain one more rule and is perhaps more complete... but the result could be the same for most people! I had this code tested when I posted the question, but decided to post less code for easier understanding of what is happening. Now I am posting my full code, so others can benefit from it.)
#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#tabbrowser-tabs .arrowscrollbox-overflow-start-indicator,
#tabbrowser-tabs .arrowscrollbox-overflow-end-indicator,
#tabbrowser-tabs #alltabs-button {
display: none;
}
#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
display: block;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
/*
display: block;
*/
overflow-y: auto !important;
min-height: var(--tab-min-height); /* default */
max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab {
flex-grow: 1;
flex-wrap:wrap;
min-width: 150px;
vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
height: var(--tab-min-height);
}
#tabbrowser-tabs .tabbrowser-tab .tab-stack {
width: 100%;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] {
min-width: 0px;
max-width: 40px;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] .tab-icon-image:not([src]) {
visibility: hidden !important;
}
#tabbrowser-tabs .tabbrowser-tab[pinned] .tab-text {
display: none !important;
}
/* Active tab's style - visuallyselected="true" === ACTIVE TAB */
#tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] {
font-weight: bold;
}
#tabbrowser-tabs .tabbrowser-tab[visuallyselected="true"] .tab-background {
background-color: lime !important; /* green, lime, LawnGreen-7CFC00, LimeGreen-32CD32, SpringGreen-00FF7F */
}
Where 5 in max-height: calc(5*var(--tab-min-height)) !important; are 5 rows, dynamically calculated height.
The above code shows tabs, but their behavior is quite bad:
the worst thing - when you scroll between the tabs using Ctrl+Tab (in the last recent order), and the tab switched to is on a different row (5+ rows away), the row with the tab doesn't scroll to the active tab. The slider must be used to manually scroll the rows and visually find the selected one...
(To clarify: I have set 5 visible rows out of 15 rows total)
tabs can't be dragged as FF core calculates it incorrectly and moves the tab to a random position
To use a fork of the legacy code, someone mentioned WaterFox (or another fork).
Are there any other (better) solutions as of today?
I'm pretty sure we'll have more options in the future, so the correct answer today may not be the best after a week or month(s)...
EDIT April 2019 (Firefox 66.x): After updating to Firefox 66, I had too many rows covering entire screen (that's 1000+ tabs). I needed to edit the original code above and added a few extra rules:
#tabbrowser-tabs .arrowscrollbox-scrollbox {
max-height: calc(5*var(--tab-min-height)) !important;
overflow: auto;
margin-bottom: calc(1.25 * var(--tab-min-height)) !important;
}
You may need to adjust them for you, in case you have different rows number (I have 5 rows with tabs). Good luck!
Multirow tab bar with working tab dragging (tested on FF 61):
Download and extract https://luke-baker.github.io/Firefox_chrome.zip
Copy userChrome.xml to your chrome folder.
Add content from userChrome.css to your userChrome.css.
Download MultiRowTabLiteforFx.uc.js
to your chrome folder.
Your chrome folder is a folder named chrome located under your user profile, e.g. ~/.mozilla/firefox/g7fa61h3.default/chrome. It does not exist by default, so create it if needed.
UPDATE
userChrome.xml file could now be obtained from Izheil's Quantum-Nox-Firefox-Dark-Full-Theme repo. There are also two versions of MultiRowTab script, for limited and unlimited number of tab rows.
I did few modifications, now should be without bugs (even if you pin tabs, move/drag window, scroll between tabs e.t.c.):
#tabbrowser-tabs .tabbrowser-arrowscrollbox,
#tabbrowser-tabs .arrowscrollbox-scrollbox {
display: block;
}
.scrollbutton-up,
.arrowscrollbox-overflow-start-indicator,
.scrollbutton-down,
.arrowscrollbox-overflow-end-indicator {
display: none !important;
}
#tabbrowser-tabs .arrowscrollbox-scrollbox .scrollbox-innerbox {
display: flex;
flex-wrap: wrap;
/*
display: block;
*/
overflow-y: auto !important;
min-height: var(--tab-min-height); /* default */
max-height: calc(5*var(--tab-min-height)) !important;
}
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) {
flex-grow: 1;
flex-wrap:wrap;
min-width: 150px;
vertical-align: bottom !important;
}
#tabbrowser-tabs .tabbrowser-tab,
#tabbrowser-tabs .tabbrowser-tab .tab-stack .tab-background {
height: var(--tab-min-height);
}
#tabbrowser-tabs .tabbrowser-tab .tab-stack {
width: 100%;
}
#titlebar-buttonbox {
display: block !important;
vertical-align: top !important;
}
#main-window[tabsintitlebar] #tabbrowser-tabs {
-moz-window-dragging: no-drag;
}
If you find the first row of tabs is invisible, open about:config and change the value of browser.tabs.drawInTitlebar from the default value of true to false.
browser.tabs.drawInTitlebar false
if you want to drag firefox window by clicking on free space of titlebar more than using 5 or more rows just delete code:
#main-window[tabsintitlebar] #tabbrowser-tabs {
-moz-window-dragging: no-drag;
}
It's enable to scroll between rows by holding scrollbar when it's more then 5 rows, but on the other hand is disable posibility to drag ff windows by titlebar.(If you don't use more then 5 rows then you can delete it)
For those interested in how this CSS UI change works, there is a helpful article on ghacks.net that describes what's being done: https://www.ghacks.net/2017/11/13/customize-firefox-57-with-css/
The article refers to the git hub project "Custom CSS tweaks for Firefox 57+" https://github.com/Aris-t2/CustomCSSforFx That project contains many different UI tweaks that can be mixed and matched. The README file there gives good insight into how to pick and choose among the options.
With regards to whether or not the chrome directory needs to be created:
On the Fedora system I used, that directory did need to be created. On the Mac system, it was already present and contained example files, userChrome-example.css and userContent-example.css.
In the userChrome-example.css file was the following:
/*
* Do not remove the #namespace line -- it's required for correct functioning
*/
#namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
Although I needed to set browser.tabs.drawInTitlebar to false, once I did that, R4zen's code worked fine for me both with and without the #namespace line present.
Just thought I'd add how to do this. (though it's provided on other linked websites, it's better to have all the info in one place.)
Start firefox
enter "about:support" in the address bar
In the table, there is a row "Profile folder". Click the button "Open folder".
under "chrome" there should be files "userChrome-example.css" which you can rename to "userChrome.css" and edit.
This saved me a lot of time because in my case, the %appdata% pointed to the wrong drive. Moreover I had to install notepad++ because the line endings were not seen by notepad.
Izheil's github repo has been referred to in the comment stacks above though the URL shared above did not work for me (hence re-sharing). The steps called out there helped me recover my Firefox look and feel to an acceptable level after upgrading to FF66 betas (non-dark and scrollable tab bar with 3 rows). I've been stuck on the FF Quantum beta channel so these may or may not help you.
The following steps have worked for me on OSX starting with FF 66 b4.
.
The selected 4 files shown above are needed at a minimum in your profile's chrome folder.
Further if I wanted to add my own customizations (unloaded, pinned tab colors, etc) I made changes to the respective files (the js files) and went through steps 3 and 4 to make them effective.
cleared all files in Macintosh HD -> Users -> [ACCOUNT] -> Library -> Caches -> Firefox -> Profiles -> [PROFILE_NAME] -> startupCache. Note the [PROFILE_NAME] folder is hidden by default.
and then I restarted my Firefox instance.
Make sure your chrome folder only has the css, js, and xml files you want to use. Backup/move everything else to some other [safe] location.
I see some people code directly the website for a desktop, but other after resenting all styles - start coding directly in media queries... for desktop, tablet and phone.
Is there any best practices or it's a preference?
wrapper {
width: 85%;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
float: left;
width: 40%;
margin-right: 5%;
}
.col2 {
float: left;
width: 25%;
margin-right: 5%;
}
.col3 {
float: right;
width: 25%;
}
#media screen and (max-width: 1280px)
wrapper {
width: 85%;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
float: left;
width: 40%;
margin-right: 5%;
.
..
...
}
Also if i write the media query for 5 different pages for example
#media screen and (max-width: 1280px)
/* Main Page */
wrapper {
width: 85%;
margin: 0 auto;
font: 90% Georgia, "Times New Roman", Times, serif;
}
.col1 {
float: left;
width: 40%;
margin-right: 5%;
/* Gallery */
/* Contacts */
Is it best way to use comments if the fail becomes to large so I don't get lost in it?
#user2852447, first you have to know about what is media query.
Responsive Design: serves the same HTML for one URL and uses CSS media queries to determine how the content is rendered on the client side. This removes the possible glitches of user-agent detection and frees users from redirects.
Now what is responsive design…?
RESPONSIVE DESIGN: Responsive web design is a setup where the server always sends the same HTML code to all devices and CSS is used to alter the rendering of the page on the device using media queries.
A CSS media query we recommend to use for Smartphone’s is:
#media only screen and (max-width: 640px) {...} // it will render the screen view according to CSS define in this media query.
So we can use CSS Media Query to achieve responsive design for different devices.
CSS MEDIA QUERY: By using the #media rule, a website can have a different layout for screen, print, mobile phone, tablet, etc.
Media Queries allow us to style elements for specific devices using attributes like resolution, aspect ratio, orientation and color index. Media queries are introduced in CSS3 and using this we are able to target specific screen sizes.
MEDIA QUERIES ATTRIBUTES: We can identify the characteristics of the device(s) browser or hardware by combining media queries features. Some of them are as follows.
Device-width: The device-width feature targets the width display area (screen size) of devices. In print media, this feature targets the width of a sheet of a paper.
Device-height: The device-height feature targets the height of the display area (screen size) of devices. In print media, this feature targets the height of a sheet of a paper.
Resolution: Queries that use the resolution target a screen’s resolution in dots per inch (DPI) or dots per centimeter (DPCM).
Orientation: The orientation media feature describes devices that use either a landscape or portrait orientation. If the height of a devices screen or sheet of paper is higher than or equal to its width, then the orientation is portrait. When the width is greater than the height, the orientation is landscape.
Basically media query is a tool which can make an existing website mobile and tablet compatible.
I recently tried applying a gradient background to a webpage using only CSS3.
while testing out the following code:
body {background: -moz-linear-gradient(top, blue, white);}
The result was:
Not exactly what I was looking for...
Any idea what is going on?
OS is Win7 64bit and Firefox 4.
Thanks!
you may want to add no-repeat to that background property…
or set a height to the <body> (and the <html>) like so:
html { height: 100%; }
body { background: -moz-linear-gradient(top, blue, white); height: 100%; }
This is happening because the height of the body is small, and by default the background is repeating.
You can either make it not repeat:
body { background-repeat: no-repeat; }
or make the height of the container (html) the size of the window:
html { height: 100%; }
though note that the latter can sometimes have unexpected effects when scrolling.
Is there a ways to check inside a browser (e.g. javascript) if the user is running inside a Remote Desktop session?
If the user is running their browser inside a Remote Desktop (i.e. Terminal Services), i want to disable animations on the web-site.
If this were a native application, as opposed to a web-site, i could perform this checking using:
//Native code
isRemoteSession = GetSystemMetrics( SM_REMOTESESSION );
or
//Managed Code:
isRemoteSession = System.Windows.Forms.SystemInformation.TerminalServerSession;
Is there a similar check that can be done inside the browser?
Note: Assume for the purposes of this discussion that the browser we're talking about is Internet Explorer 8.
Update One: Perhaps something in How can you get the terminal service client machine name from javascript?
My solution is to use CSS #media queries for minimum and maximum values of the color media feature. Based on experiment, RDP only seems to have 5 bits per color, rather than the full 8 bits per color of your typical desktop.
This solution is, of course, not perfect, because you'll get lots of false positives from people who aren't on RDP, but just happen to have low color-depth displays. However:
If you are in a relatively controlled environment like a corporate intranet, you might feel more confident that "low color depth" = "RDP".
Many of the visual elements that need adjusting for RDP on a web-page, need adjusting precisely because of the low color depth (gradients, fade outs, animation, etc.), and so it actually makes sense to test for color depth rather than RDP per se.
Here is an example that works for me in recent version of Firefox and Chrome. See the screenshot below.
<!DOCTYPE html>
<html>
<head>
<title>Test RDP detection</title>
<style type="text/css">
#media all { li.color { display: none; } }
#media all and (min-color: 1) { li.color.color-depth-1 { display: block; } }
#media all and (min-color: 2) { li.color.color-depth-2 { display: block; } }
#media all and (min-color: 3) { li.color.color-depth-3 { display: block; } }
#media all and (min-color: 4) { li.color.color-depth-4 { display: block; } }
#media all and (min-color: 5) { li.color.color-depth-5 { display: block; } }
#media all and (min-color: 6) { li.color.color-depth-6 { display: block; } }
#media all and (min-color: 7) { li.color.color-depth-7 { display: block; } }
#media all and (min-color: 8) { li.color.color-depth-8 { display: block; } }
/* 5 bits per color seems to be the max for RDP */
#media all and (max-color: 5) {
.not-rdp { display: none; }
}
#media all and (min-color: 6) {
.rdp-only { display: none; }
}
</style>
</head>
<body>
<p>This page uses CSS <tt>#media</tt> queries to detect whether you
are viewing it over RDP—heuristically, by looking at the
color depth of your display.</p>
<ul>
<li class="color color-depth-1">Your display is not monochrome!</li>
<li class="color color-depth-2">Your display has at least 2 bits per color.</li>
<li class="color color-depth-3">Your display has at least 3 bits per color.</li>
<li class="color color-depth-4">Your display has at least 4 bits per color.</li>
<li class="color color-depth-5">Your display has at least 5 bits per color.</li>
<li class="color color-depth-6">Your display has at least 6 bits per color.</li>
<li class="color color-depth-7">Your display has at least 7 bits per color.</li>
<li class="color color-depth-8">Your display has at least 8 bits per color.</li>
</ul>
<p>You are <span class="not-rdp">not</span> using RDP.</p>
<p class="rdp-only">This is only visible over RDP.</p>
</body>
</html>
Yet another approach along these lines is to use javascript to examine the value of the screen.colorDepth variable.
You can use the following media query:
#media screen and (prefers-reduced-motion: reduce) { . . . }
This condition can also hold for non-RDP sessions, but as your intention is to disable all animations, this type of query is probably exactly what you're looking for.
You can probably expose the detection code via an ActiveX or BHO (e.g. assign a property to the window object in BHO) if you use IE.
Otherwise if you are using an ActiveX player to play animation, check the player's documentation to see if it automatically adjust frame rate under remote desktop.
You can always offer a low bandwidth version of your web site and instruct the user choose the web site instead of the regular web site if the video playback is not satisfactory.
For tips in writing a terminal service-aware graphics app, check graphic effects consideration, and the general performance guidelines
Perhaps you can read the SESSIONNAME environment variable?
For a console session it should be CONSOLE and for an RDP session it should be RDP-TCP followed by a number.
I'm assuming you are talking about a specific company terminal server, not any terminal server. You could not serve animations to the specific IP address of the TS.
This should not be done or decided by your application. On RDP client (like MS RDC), user can choose to disable animations etc. User can also disable these on server side (Terminal server or RDP host)