public marks

PUBLIC MARKS from decembre with tags browser & css

This year

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

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 -

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


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

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 [] 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.

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.


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

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

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


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 / Javascript : Browserhacks : Lst of browser specific CSS and JavaScript hacks

by 3 others
Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. How to?: Pick the hack you want Copy it into your stylesheet Add the style you want between the braces Enjoy the new styles for the browser you targete


Sécurité des navigateurs (Panopticlick ou comment une technique simple peut bousiller tout votre anonymat) - Wiki de l'internet libre - Korben

Des chercheurs en sécurité sont en train de travailler sur une technique pour dé-anonymiser les internautes. Il partent du principe que chaque personne possède un navigateur différent, des plugins différents, avec des versions différentes, des polices différentes, un fuseau horaire différent…etc. Et toutes ces petites différences, misent bout à bout, permettent au final de créer une empreinte unique du navigateur (donc de la machine utilisée pour aller sur le net). Ça, c’est ce que l’EFF a appelé Panopticlick et que vous pouvez tester en allant ici. Mais une nouvelle technique exploite les réseaux sociaux. En effet, en exploitant l’historique de votre navigateur, un attaquant (ou un espion ou une société privée) peut savoir sur quels sites vous avez été. il devient possible de clairement vous identifier en tant que personne lors de votre surf quotidien et ce même si vous passez par un VPN…


Nuke Anything Enhanced

Allows you to remove anything from any website.