PUBLIC MARKS from decembre with tags firefox & css

Browser - Firefox Edge (Light & Dark)

element() brings CSS design to a new level, in an easily way. Few ideas that comes to my mind (some that I've already used since the last 4 years): - when you have to deal with duplicated content in advanced effects - live thumbnails of previous/next slides in a slideshow - live zoom over an image, for example in an e-commerce product page - animated background, using CSS Animations or by referencing a video, canvas or SVG - faking backdrop-filter or filter() - watermark with multiples backgrounds from Lea Verou idea - and anything you’re currently thinking of ;) Few things we can note: - prefixed for now in Firefox: -moz-element() - impact on rendering performance when using multiple reference. Not as bad as CSS filters, but still something you have to consider - there’s a CanIUse support page - Issue Chromium - Issue WebKit - No mention from IE Platform Status

The Developer Edition is the replacement for Firebug https://www.mozilla.org/en-US/firefox/developer/Yes, I know you can right click and copy the css or xpath, but thats not what I am asking. I am asking about the functionality that was provided by firefinder add on. Does FF offer that somewhere now that firebug was removed and added to the developer version.

An alternative or Update ? Rated 5 out of 5 stars by decembre on Feb. 21, 2018 · permalink When i write an Userstyle it is (was) the primary tool i use with Firebug. Now i search an alternative for this great tool: The devtool don't give us the possibility to search or test a specific CSS selector like Firepath do. And in an other hand the DevTool is less useful than Firebug (it don't give an easy way to identify in which userstyle a CSS rule is - with an human reading way)

FirefoxCSS

'about:config' tweaks (To revert changes right-click entry and select 'reset'): - Tab audio icon browser.tabs.showAudioPlayingIcon - Insert related tab after current tab (suggestion: enable / set to 'true') browser.tabs.insertRelatedAfterCurrent - Titlebar browser.tabs.drawInTitlebar - Searchbar: open search results in new tab browser.search.openintab - Reader mode reader.parse-on-load.enabled - Geolocation (suggestion: disable / set to 'false') geo.enabled - Pocket (suggestion: disable / set to 'false') extensions.pocket.enabled - Anti fingerprinting (Caution: browser might behave in unforseen ways!) privacy.resistFingerprinting read: Fingerprinting info at Mozilla Wiki tweaks ***** Suggested ui tweaks ***** - Toolbar modes (suggestion: compact mode) Customize mode > Density > Compact / Normal / Touch - Titlebar modes (suggestion: Firefox titlebar ['application/hamburger button in titlebar' only works in Firefox titlebar]) Customize mode > Title Bar > uncheck checkbox Drag space above tabs toolbar (suggestion: disable drag space ['application/hamburger button in titlebar' works best without drag space]) Customize mode > Drag Space > uncheck checkbox Bookmarks menu button on bookmarks toolbar Customize mode > Toolbars > Bookmarks Toolbar Customize mode > move 'bookmarks menu' button to bookmark toolbars end Downloads button always visible Customize mode > downloads button > click on button and uncheck 'Auto-hide' Searchbar (suggestion: placed after location bar) Customize mode > Search(bar) > move to navigation toolbar Flexible spaces (suggestion: remove spaces after and before location bar) Customize mode > grab and drag flexible space into palette

userChrome.css is a style sheet with special importance to Firefox. The rules in userChrome.css are applied to the user interface, and can override nearly every built-in style rule. Unfortunately, you cannot use userChrome.css to change the functional operation of Firefox; that's what extensions are for. Creating a userChrome.css file and adding style rules allows you to make changes to fonts and colors, hide unnecessary items, adjust spacing, and make other changes to the appearance of Firefox. The following examples illustrate the wide range of effects you can create, either by creating your own style recipes, or building on the work of CSS wizards sharing their talents on the web.

How to make a custom theme with stylus for userstyles (Basics)

listing of bookmarks folder icon user styles _ /* = NO Folders Icons BOOKMARKS - No bookmarks bar icons by xd_1771 = */ /* ==== NO Folders Icons BOOKMARKS - No bookmarks bar icons by xd_1771 - UP - TWEAK === */ toolbarbutton.bookmark-item > .toolbarbutton-icon { display: none !important; }

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).

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.

The addon directory in the distribution contains a number of reusable components that implement extra editor functionality

Specifies how the background, padding, border, border-image, box-shadow, margin and clip of an element is applied when the box for the element is fragmented. Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed. Each piece of the rendering for the element is called a fragment.Syntax Formal syntax: slice | clone --- box-decoration-break: slice; box-decoration-break: clone; box-decoration-break: initial; box-decoration-break: inherit; box-decoration-break: unset;

A group of developers working towards a client-side solution for delivering alternate image data based on device capabilities to prevent wasted bandwidth and optimize display for both screen and print.

When editing userChrome.css, you must add CSS selectors based on the element names and IDs/classes of the XUL user interface. There is no comprehensive listing of every single possible selector to use when styling the user interface (just as it would be silly to create such a comprehensive list for a web page), but a few of the more common and interesting selectors are listed below. The best way to discover how to select an element in the user interface is to use the DOM Inspector.

Vieux tuto: Mais utile.Découvrir Firefox si vous ne le connaissez pas (partie 1) et/ou de vous montrer comment modifier Firefox comme vous le voulez.

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

This styles makes the map window bigger, you will find the search at the top left. Print-, email- and link-button are on the top right. Because someone asked: Since you need the "Stylish" extension for this, this is not available for Internet Explorer.

Firefox: Si vous utilisez Firefox systématiquement à une distance lors de présentations ou de votre canapé, par exemple, cette combinaison intelligente de Tweaks Firefox la rend plus facile pour vos yeux. 1. Téléchargez ce fichier userChrome.css ici. 2. Placez le userChrome.css 'dans le dossier suivant: ~ / Bibliothèque / Application Support / Firefox / Profiles / [profil]-name / chrome / [Ed. Note: Ils utilisent Mac OS X, reportez-vous cet article de la Base de connaissances MozillaZine pour trouver l'emplacement du dossier de profil dans votre système d'exploitation.] 3. Installez le plugin en cliquant sur Non Squint ici. 4. Changer de page par défaut du plugin n Squint de «plein niveau de zoom" mise à 150%. 5. Installer un thème qui fonctionne avec la taille du texte augmenté. J'ai choisi Hexxya, Qui utilise également des icônes plus petites de sorte que vous pouvez voir plus de votre barre d'adressei. 6. Profitez de votre navigateur Firefox HD!Firefox Dix Mode Couch Foot

Nouvelle interface de programmation afin de faciliter davantage le développement de nouvelles extensions. Baptisé Jetpack, permet à n'importe qui capable de coder une page web de moduler le navigateur. Oubliez les redémarrages du logiciel, il suffira de cliquer sur un simple lien pour installer l'addon de son choix et de recharger la page en cours de consultation. « Nous voulons permettre à plus de gens de participer à la création des fonctionnalités du navigateur », explique Aza Raskin, en charge du département de l'expérience utilisateur chez Mozilla. Il précise que n'importe quel développeur web familier avec le HTML, le CSS ou le JavaScript peut se lancer dans l'aventure.

Traduction française de l'extension Web Developer de Chris Pederick (http://chrispederick.com/work/web-developer/). Cette magnifique extension propose plein d'outils facilitant le développement de site web.

Ce site est consacré à toutes les technologies disponibles sur la plate-forme Mozilla®, utilisée par le navigateur Mozilla Firefox™, le client mail Mozilla Thunderbird™ et les autres produits de la fondation Mozilla®. La plate-forme Mozilla® permet de développer des applications desktop ou web, fonctionnant nativement sur la plupart des systèmes d'exploitations. C'est aussi la première plate-forme vous permettant de réaliser des clients riches ou d'utiliser Firefox en tant que client riche. En effet, de l'interface graphique utilisateur reposant sur un format XML, XUL™, aux composants XPCOM réutilisables et multi plate-forme, Mozilla offre tout un ensemble de technologies, pour la plupart standardisées et relativement aisé à mettre en oeuvre : XBL, EcmaScript (Javascript 1.8), CSS, XHTML/HTML 5, SVG, XForms, MATHML, RDF, DOM, XML-RPC ... Vous pouvez commencer par une présentation de XUL.

The DOM Inspector (also known as DOMi) is a developer tool used to inspect, browse, and edit the Document Object Model of documents - usually web pages or XUL windows. The DOM hierarchy can be navigated using a two-paned window that allows for a variety of different views on the document and all nodes within.

CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS.