public marks

PUBLIC MARKS from decembre with tag browser

This year

FIR - Firefox Update 57 (2017) - OPINIONS - How to enable legacy extensions in Firefox 57 - gHacks Tech News

(via)
If you are using Firefox Nightly right now, you may have noticed that the latest update of the web browser disabled all legacy add-ons. Firefox Nightly is the first version of the Firefox web browser that hit version 57, the version of Firefox that drops support for so-called legacy add-ons in favor of WebExtensions.

CSS - RESPONSIVE - CALC - Imitating calc() Fallback or Fixed-Width Sidebar In Responsive Layout — Osvaldas Valutis (2013)

If you were attentive you should see that the line width: calc( 12.5em ) is the trick here. Why? Let’s see all these widths like in pairs – exactly what we need browsers to do. The first pair is width: 80% (content) and width: 16.666% (sidebar) that does the job in calc() incompatible browsers, which will just ignore calc(). It is the callback (backup). It means that the minority of website visitors will see narrower sidebar on narrower viewports. And that should be perfectly fine for people using older browser versions. The second: width: calc( 100% - 15em ) and width: calc( 12.5em ). This is for newer browser versions which will override the previous width definitions

TEXTARERA - TRICK - ADD LINK - How to type upside down text on Facebook

by 1 other (via)
(Copy & paste in browser on Facebook, Twitter, YouTube, MySpace, Yahoo, MSN, AOL, Bebo, Craigslist, Gmail, Word ...)

CSS - GRID - Building a CSS Grid Overlay | CSS-Tricks

Let's take a look at what it takes to build a grid overlay with CSS. It will be responsive, easily customizable and make heavy use of CSS variables (known more accurately as "CSS custom properties"). If you aren't familiar with custom properties, I'd highly recommend reading What is the difference between CSS variables and preprocessor variables? and watching Lea Verou's enlighting talk on using them. This grid overlay that we're building will consider a developer tool, as in, a tool just for us, not really our users. So, let's not worry too much about browser support (If you do care, check out caniuse… data on custom properties). While it's impossible to preprocess custom properties to behave exactly the same as native support, if you use them just like you would preprocessor variables, tools like the postCSS plugin cssnext can transform them into CSS compliant with older browsers.

CSS - Using DevTools to Tweak Designs in the Browser | CSS-Tricks - 2017

Let's look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy!

FIREFOX - DEV - BROWSER TOOLBOX - change color of firefox bookmarks menu - forum.userstyles.org

you can use Firefox menu->Developer->BrowserToolbox to examine UI elements and play with CSS. After you open it, click OK in the main browser window, wait a few seconds for the toolbox to initiliaze, then use the first button in its toolbar to pick an element (bookmarks button in your case).

2016

FIREFOX - DEV TOOL - (improve-fb-theme) [meta] Firebug Theme Improvements

For bugs relating to developer tools within the Firefox web browser (devtools). This includes developer-related APIs and front-end features.

FIREFOX - DEV TOOL - FIREBUG missing Extensions - - 991806 – (firebug-gaps) Firebug Gaps

Bug 991806 - (firebug-gaps) Firebug Gaps Developer Tools (show other bugs) (hide info) For bugs relating to developer tools within the Firefox web browser (devtools). This includes developer-related APIs and front-end features.

2015

CSS - FIR - Firefox CSS Hacks Collection | Jeff Clayton IT Director / Senior Software Engineer / Film & Photography

(via)
These are my legal CSS Hacks for fixing web browser quirks or outright bugs. Please enjoy, I have been working on them for years. May it help you if you need them. Please read here first: [What are these CSS Hacks Anyway?] Then check my [Live CSS Hacks Test Page] and also [BrowserHacks.com] where I sent new hacks and test submissions for the site.

CSS3 - SCROLL - NEW - Native CSS Scroll Snap Points | CSS-Tricks

The newly-introduced CSS “snap points” properties could make it a whole lot easier to create CSS-only scroll effects (once browser support catches up). This post from Sergey Gospodarets' blog includes demos of snappy scrolling for image galleries and full-page vertical scrolling.

IMAGE - New Format - BPG/JPEG comparison on the Lena picture

BPG/JPEG comparison on the Lena picture [The BPG images are decoded in your browser with a small Javascript decoder. The JPEG images were compressed with mozjpeg + jpegcrush.]

PRIVACY TOOL - BrowserLeaks.com — Web Browser Security Checklist for Identity Theft Protection

It's all about Web Browser Fingerprinting. Here you will find the gallery of web browser security testing tools, that tell you what exactly personal identity data may be leaked without any permissions when you surf the Internet.

WIN HOST - Dev version of popular blocker extension µBlock for Firefox released - gHacks Tech News

Maybe I'm overlooking something but I don't understand why people are using ad-blockers that run in their browsers ... In most operating systems there already exists an effective and resource-efficient way to filter network traffic by diverting specific IPs or URLs to the localhost. Using the hosts file, which exists in the BSDs, in Linux, in Windows etc., to filter out undesirable or dangerous stuff is in my opinion a much more universal and elegant method than browser based ad-blockers. I've been using this method since ages, first in Windows and now since almost 15 years in Linux, and I have never experienced any slow-downs or hang-ups. The hosts file I'm using is the 'classic' from ... http://winhelp2002.mvps.org/hosts.htm ... which currently contains over 15000 entries, is well maintained and updated each 4-6 weeks. I've written a short script which on boot-up looks if a new hosts file is available, and if it is, downloads and copies the file into the /etc directory. Cool! :-)

FIREFOX - 3 Step Problem Fix/Solution for Continuous Mozilla Firefox Freezing | Blogiac - A Journal of Personal Views on Things

(via)
Continuously, after a fixed time interval, the browser freezes/becomes unresponsive momentarily, and then becomes responsive again. === TRY : Type "about:config" === Find or locate the preference "dom.min_background_timeout_value" === open up the dialogue box "Enter Integer Value" === change the previous value (which will be y default less than 1000) to a very large value, lets say 1000000

CSS - ONLINE TOOL - What’s my browser size, trouver les dimensions de la fenêtre du navigateur | Édition Nº42 | le train de 13h37

« What’s my browser size ? » est une page internet qui indique quelles sont les dimensions (hauteur et largeur) de la fenêtre de votre navigateur. Particulièrement utile dans le cadre d’intégrations responsive, ce service constitue une bonne alternative aux extensions des différents navigateurs.

2014

FIR XPI - DEV - Force CORS Firefox Extension

a very simple extension for Firefox that adds the Cross Origin Resource Sharing (CORS) Access-Control- HTTP headers to all responses before they're processed by the browser. This essentially disables the browser's same origin policy and allows cross domain calls even if the web server does not support CORS. The default setting adds the following headers to every response:

MUSIC - 10 Virtual Instruments You Can Play In Your Web Browser

If you’re a musician, you probably know how annoying it can be to be away from your instrument(s). At times when you can’t have your instrument with you but you feel like you need to belt out a tune or two, perhaps you can seek solace in browser-based virtual instruments. If you ever feel the need to scratch that musical itch, you could do worse than play around with any one of these 10 virtual instruments.

ADDON - YOUTUBE - Anti Pub - Magic Actions for YouTube™ | The Best Way to Watch YouTube Videos

One of the best ways to take advantage of all that YouTube has to offer is to enhance your video viewing experience by installing the Magic Actions for YouTube™ browser extension. To make the browser plug-in even more attractive, there are versions available for Google Chrome™, Mozilla Firefox™ and Opera™ web browser.

CSS - Responsive Design - Break-points come from content

To me, it seems more realistic to check our layouts through viewports of arbitrary dimensions and shapes. We don't need anything fancy, we can simply drag the bottom right corner of our favorite desktop browser to enter... "Device Agnostic Mode".

jQuery - jQAPI - Alternative jQuery Documentation Browser

by 2 others
This is a alternative interface to browse the Official jQuery Documentation that can be found on GitHub . The aim of this project is to get out of the way of your development work. Quickly switch to this docs and find what you are looking for.

STY - USERSTYLES Rounded first and last tab - Themes and Skins for Browser - userstyles.org

A style I made for fun, to round the first tab top left corner, and new tab top right corner. A good demonstration of using child tokens

2013

CSS - PREFIX avec JAVASCRIPT - -prefix-free, préfixes CSS3 ajoutés automatiquement - Alsacreations

Utilité de -prefix-free ? -prefix-free est un petit fichier JavaScript qui ajoute à la volée le bon préfixe propriétaire selon le navigateur affichant la page. Plus besoin, donc, d'ajouter dans la feuille de style les différentes propriétés propriétaires ! -prefix-free adapte la propriété CSS3 au navigateur.

CSS - USERSTYLES - Code for various Firefox elements? - forum.userstyles.org

You can inspect the Firefox user interface directly with DOM Inspector. (Which is not the same Inspector as in the Web Developer menu.) [addons.mozilla.org] https://addons.mozilla.org/en-US/firefox/addon/dom-inspector-6622/Click the icon in the upper-left corner of DOMi, the one with a pointer on it, then click anywhere in the browser to select an element; that element will be highlighted in the left column. Right-click the highlighted entry to display a context menu: "Copy Selector" suggests selectors for the element, "Set Pseudo-classes..." lets you switch on :hover. Notice that the browser itself is a document with its own URI, chrome://browser/content/browser.xul, Most of the browser chrome is XUL, but some, such as the Stylish editor, is HTML embedded in XUL. https://developer.mozilla.org/en-US/docs/XUL