Étiquette : css

How to cache the CSS Fonts with Sharepoint

If you use your own CSS file with your own CSS fonts, then we’ll notice that Sharepoint doesn’t send cache headers if you use the below CSS code: @font-face { font-family: ‘Roboto’; src: url(‘/_catalogs/masterpage/css/fonts/Roboto/Regular/Roboto-Regular.woff2’) format(‘woff2’), url(‘/_catalogs/masterpage/css/fonts/Roboto/Regular/Roboto-Regular.woff’) format(‘woff’), url(‘/_catalogs/masterpage/css/fonts/Roboto/Regular/Roboto-Regular.ttf’) format(‘truetype’); font-weight: 400; font-style: normal; } To have this resource sent back from the Sharepoint server with […]

Autosize a text to fit into a div in pure/native JavaScript

I was looking for a very tiny and light solution to fit a text inside a box. The box’ height and width are fixed. I only found some great solutions like BigText but I didn’t want to have jQuery loaded. Finally I found some code on StackOverflow and also at Coderwall. I created my own […]

Breadcrumb / steps in CSS that works from IE8 [CSS]

I was looking for a simple code for a step by step process indicator. I found a few things, but everyone seems to have forgotten about IE8… I need to support this old browser at work. So I did my own that I’m sharing here: File Uploaded → File Reviewed → File Approved And the […]

Dynamically inject a CSS code into the page [JavaScript]

Mozilla created a function that permits to inject some CSS into the document: addStylesheetRules() But if you use jQuery you may want to use this function: function injectCSS(rule) { $(« head »).append(‘<style>’ + rule + ‘</style>’) } // example injectCSS(« div { padding:5px } »)

Obtenir une couleur plus sombre ou plus claire pour CSS [javascript]

EDIT du 22/05/2012 : il existe un site qui permet de trouver plusieurs dégradés à partir d’une couleur, et ça se passe sur http://0to255.com/ EDIT du 20/09/2012 : et voilà encore un autre site un peu plus intéressant que le précédent http://sassme.arc90.com/ EDIT du 25/09/2012 : une autre fonction/méthode plus légère est disponible tout en […]

Datepicker pour Bootstrap [Javascript]

Edit 5/04/2012 : d’autres personnes ont fait comme moi, et vous pouvez trouver leur repository sur https://github.com/eternicode/bootstrap-datepicker — ils ont corrigé les mêmes bugs visiblement et ont ajouté quelques petites choses comme le support i18n (internationalisation du format de la date) J’ai découvert un datepicker qui utilise l’excellent Bootstrap de Twitter (vous savez c’est un […]

CSS3 PIE pour créer un border-radius sur IE [webdesign]

Si vous cherchez à faire un border-radius sur un vieux IE vous avez dû vous rendre compte que cela ne fonctionne pas… mais heureusement il existe CSS3 PIE qui est un « petit » fichier qui va permettre de créer l’effet désiré ! A noter cependant que je rencontre un problème : lorsque j’applique le fichier htc […]

Quelles polices de caractères utilisées sur le web ? [Web Design]

[niveau: intermédiaire] Si vous n’êtes pas un webdesigner professionnel, vous vous demandez sans doute quelles polices de caractères sont utilisables sur le Web. Peut-on utiliser une fonte personnalisée? Quelles sont les principales familles de fontes génériques? C’est ainsi qu’est introduit le billet d’Alsacreation qui vous explique parfaitement les polices disponibles pour la plupart des navigateurs. […]

Adapter la taille des polices de caractères selon les navigateurs [Web Design]

[niveau: expert] OpenWeb propose un excellent article nommé « Compatibilité multi-navigateurs des polices de caractères » où ils y expliquent les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web. Pour résumer, il est conseillé de ne pas utiliser une […]