OS specific css in firefox add-on - javascript

Firefox add-on. Facing some padding problems for some XUL elements in mac os (windows, linux are okay). I wish to know if there are any css tricks to identify the OS platform and apply a style to an element only for that OS ?
From a search, some of the possible options I found are :
Create a separate stylesheet file for the OS and modify chrome.manifest to point to that.
Use some external js library and use css selectors.
Identify platform from the add-on code, and load and register a second style sheet using the style sheet service
First option requires me to duplicate everything in stylesheets. Second one brings in dependency on other libraries. Third option might work, but I want to know if there are any simpler, elegant solutions ?
Thank you!

Those three options are pretty much it. For the first option you should put all of the common css in to one css file, and load that on all platforms.

Related

How to change default style for unstyled input elements [duplicate]

I would like to apply a CSS stylesheet to all page views in a Firefox browser using a menu option and be able to toggle this when required. (The functionality I want exists in IE: Tools | Internet Options | Accessibility | Format Documents Using my Stylesheet (although I think this may affect pages outside of simply IE).
You could use the file userContent.css lying within the directory named chrome in your Mozilla Firefox profiles directory. There is also an example file named userContent-example.css.
you can use Stylish, you can define global styles in firefox and ability to switch it on and off fast from Firefox.
Usage page.
Global styles, you can see code and how it is done.
There is another Firefox addon called Platypus which which adds a toolbar for editing site styles. It does require you to install Grease Monkey.
I just installed Stylish and my first impression is that is nicer than Platypus, especially when it comes to sharing your styles with others. But I'll reverse my judgment as to which I think is better when I have more time to compare them. :)

JavaFX 2.2 WebEngine HTML Select Dropdown Styling

I am working on a project that I cannot change to Java 1.8 to take in the newest JavaFX, this may or may not be relevant to the issue at hand. I have been trying everything that I can find on the internet to override the default look and feel for a drop down selection within the web browser. I have tried Javascript solutions, pure CSS solutions, and even trying to build the functionality using lists and CSS. Nothing seems to work within the WebView/WebEngine on JavaFX 2.2, most of the solutions I have tried work perfectly fine within Firefox (I know its not the best comparison because Firefox doesn't utilize webkit under the hood).
Any ideas on how to style the dropdown part of the select feature with JavaFX 2.2 WebView?
List of techniques I have tried:
http://wellstyled.com/en/javascript-styleselect-jquery-plugin/
http://www.givainc.com/labs/mcdropdown_jquery_plugin.cfm
http://www.scribbletribe.com/how-to-style-the-select-dropdown/
http://cssdeck.com/labs/styling-select-box-with-css3
http://bavotasan.com/2011/style-select-box-using-only-css/
http://www.htmllion.com/default-select-dropdown-style-just-css.html
http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/
I found something that works and actually improves my interface. I was searching the UX Stack Exchange and found Chosen. Original UX Stack Exchange post
I have create JavaFX app with webview (angularjs and bootstrap).
This is how the element is rendered in Chrome
This is how select element is rendered in ubuntu jar file
I have try multiple fixes but it seams that this dropdown is rendered from the browser itself (will be rendered different in linux, macos, windows) and there is no way to style it.
Mine working solution is to use plane js library as tom-select, no dependencies.
And here how select element is rendered in chrome and in jar. Success :)

Conditional stylesheet by useragent

What is the best way to choose the stylesheet that will be shown depending on the useragent?
Example, i want to show a css style for Android and a different one for IPhone.
Is it possible with css only?
Can i use something like media queries?
Thanks in advance
With Internet Explorer you can use conditional comments (http://msdn.microsoft.com/en-us/library/ms537512.aspx) to include stylesheets in a specific browser. This technique does not work in other browsers, and I believe it does not work in the latest version of Internet Explorer.
To my knowledge, the only way to accomplish this is with Javascript. The simplest method is to add a class to the HTML tag of the page (i.e. ".android" or ".iphone") with Javascript based on the user agent string. In the CSS simply reference .android or .iphone in your stylesheet to specifically target one or the other.
However, the best approach is to avoid doing specific browser detection whenever possible. Feature detection is the preferred approach (http://www.joezimjs.com/javascript/feature-detection-vs-browser-detection/). This is an exception as your intentions are to have a different theme based on the device.
See the isMobile Javascript library (https://github.com/kaimallea/isMobile) to easily detect an Apple or Android device. As long as the stylesheet isn't huge for each theme, I would recommend merging the Android and Apple stylesheets into one. Than use isMobile library with a little custom Javascript to add the necessary CSS class to the HTML tag.

Update the CSS of a Website without refreshing the Page

I've created a page with CSS. Now I must change from my editor to my browser and refresh the full page, just to have a look at every little change. But I don't want to refresh the page, because I have some animations.
So is there anything which I can use that my site updates automatically after a CSS update?
Maybe with JavaScript, jQuery, Ajax or something?
Here you are: http://cssrefresh.frebsite.nl/
CSSrefresh is a small, unobstructive javascript file that monitors the CSS-files included in your webpage. As soon as you save a CSS-file, the changes are directly implemented, without having to refresh your browser.
Just insert the javascript file and it works!
But note: It only works when you have the files on a server!
Edit: LiveStyle
If you develop with Sublime Text and Google Chrome or Apple Safari, then you should use Emmet LiveStyle. This is a more powerful Live CSS-Reloader.
Now I use it instead of CSS Refresh.
If you want more information about this awesome plugin, please read the Post by Smashing Magazine
With jQuery you can create a function that reloads external stylesheets.
/**
* Forces a reload of all stylesheets by appending a unique query string
* to each stylesheet URL.
*/
function reloadStylesheets() {
var queryString = '?reload=' + new Date().getTime();
$('link[rel="stylesheet"]').each(function () {
this.href = this.href.replace(/\?.*|$/, queryString);
});
}
Have a look at http://livereload.com/.
It works as a browser plugin for OS X and windows. I like it because I do not have to embed additional javascript which I could accidentally commit in my versioning control.
I find browser plugins/extensions to be the easiest solution. They don't require any code changes to your individual sites. And they can be used for any site on the web — which is useful if I modify something in-memory real quick to hide a toolbar or fix a bug temporarily; once finished mucking with it, I can press a key and all the CSS is back to normal.
Once installed, (most) CSS reloaded plugins/extensions don't reload the CSS automatically. But usually work with something as simple as a toolbar button, a context menu item, and/or a simple key press to reload the CSS. I find this method is less error prone anyway, and is much less complicated then some of the automated solutions out there.
Some examples (feel free to suggest some others):
Chrome:
tin.cr (includes automatic reload, and can persist in-browser changes to source files)
CSS Refresh
Firefox:
CSS Reloaded
CSS Refresh
Here is my little Project. Please give it a try
CSS Auto reload on Github
Yes you can manipulate the CSS via jQuery:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
You could also use the toggleClass method.
http://api.jquery.com/toggleClass/
http://jqueryui.com/demos/switchClass/
Firebug for FireFox.
It's a plugin in an attached/separate window. Changes to HTML/CSS appear instantly, elements are highlighted.
Advantage over JS hacks is that you can't copy this accidentally to your production instance.
You are looking for Live Reload:
It's available as a browser extension and easy to implement
http://livereload.com/
The new open-source code editor, brackets, has a Live Development feature where you can edit CSS in the editor and it will immediately be reflected in the chrome browser. It currently only works for CSS editing, but HTML editing is coming soon!
Firebug for Firefox is my prefered method:
https://addons.mozilla.org/de/firefox/addon/firebug/
You can edit HTML and CSS on the fly, quickly deactivate CSS rules (without deleting them), add or remove HTML and so on. If you wan't to tweak your design this is your choice. You can even save changes to a local copy, but I hardly ever use that feature.
If you are using Firefox then you can install Web Developer Toolbar 1.2.2 from Add-on of Firefox which has option of Reload Linked Stylesheets.
Try using CSS Brush, a chrome plugin for creating CSS live. You needn't have to write all CSS in a text editor, come back to browser and reload it, rather write the CSS live as if you were doing it in a text editor. You will have more features than a text editor here like context-sensitive-menu, use duplicate properties, select complete CSS path or a filtered path of a element directly from the page.
This might help -> chaicode
Its a live CSS, Javascript and HTML editor that is opensource and a wip.
github

have NETWORK_ERR with less.js

I'm using less.js for better responsive css design, but now I encounter NETWORK_ERR while using webkit based browser and also chrome. However firefox would not have this kinda issue.
I trying to google my question but it seems the only solution is to put less files on other server or it's unavoidable to read less.js' src as "file:///*xxxx/less.js" instead of "file://*xxxx/less.js" .
My question is , is there any way to do to change the way as file:/// to file://?
and one more question , is there any better css framework which can do better responsive and organized design? Less.js is good to organize and I also use javascript to change some variable dynamic.
Thanks.
It is always good to serve css js and images from a different server which can act as CDN. and in your case you can also over come the chrome issue.
here are some of the solutions for your file:/// to file:// issue (not sure if you have already seen these)
look at this link
you can over come this in couple of ways look at Nathan Strutz's answer where he is suggesting to add a command-line switch -allow-file-access-from-files to your shortcut and Chrome will allow you to load LESS.JS without any problem, and also below you can how to add the command line switch.
also i am particularly interested in MrClean's answer (last answer) I havent tried it out though but you can give it a try.
and to answer your second question there are bunch of frameworks which can do css responsive designes click here for list i am particularly interested in foundation, mqframework, Golden Grid System framework and Fluid Baseline Grid.

Categories