Marenkův bloček: CSS

Zobrazují se příspěvky se štítkemCSS. Zobrazit všechny příspěvky

středa 14. července 2021

Jak ladit web pro Safari na Linuxu?

A je to tu zase! Reklamace, že se zase cosi nějak divně ukazuje v Safari na Macu. Hmm, jasně, opravím... Ale jak přijít na to, co to vlastně sakra... Macka nemám, pracuju na Linuxu. Safari pro Linux? Není. Cesta přes Wine? To ne ne. Virtuální OS s prohlížečem? To už mám vyzkoušené kvůli IE a není to zrovna komfortní. Něco nativního? Co? Ale moment! Safari jede na WebKit, ne? Na stránce download mimo jiné prohlížeč Epiphany, ale nějaký divný archiv toto... Podle pkgs.org jsem pak ale kulišácky dohledal jméno balíčku epiphany-browser. Pak stačí standardní instalace

sudo apt-get install epiphany-browser

a voilá! Máme tu prohlížeč "Web" ukazující neduhy Safari na Ubuntu. Alespoň to, co mi bylo reklamováno ano. Ladící nástroj je podezřele podobný tomu ve Firefoxu, není-li stejný. Takže... a hotovo, opraveno. :-)

Ale samozřejmě netvrdím, že to nejde jinak a lépe. ;-)

Odkazy:

WebKit
Epiphany-browser Download (DEB) (dohledej si balíček podle verze OS)
Luakit Web Browser (další prohlížeč, nezkoušel jsem)
Common WebKit Browsers - dummies

sobota 1. srpna 2020

Neseriózní Less.js v prohlížeči

Bez css preprocesoru jako je Less.js si dnes snad ani seriózní webařinu nedokážeme představit. Při normální seriózní práci si také neumíme představit, že by se kompilace less nespustila při buildu (nebo tak nějak jako podobně, prostě "pre-").

Ale občas se hodí zcela neseriózně zpracovat less v prohlížeči, třeba když připravujete jen takovou stránečku třeba pro náhled ikon, nebo tak něco, a chcete použít fragment stylů projektu v less. Není to žádný problém.

Podle Using Less.js - Browser Usage | Less.js potažmo less-docs/using-less-in-the-browser.md at master · less/less-docs · GitHub či LESS - Using Less In The Browser - Tutorialspoint a less.js - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites! necháme natáhnout script, případně doplníme konfiguraci, a podle css - Is it possible to inline LESS stylesheets? - Stack Overflow upravíme type, protože při naší neserióznosti máme styly přímo v html. Script pak musí být natažen až za styly! Výsledný kód pak bude vypadat nějak takto:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style>
    
              /* css */

    
        </style>
        <style type="text/less">
    
              /* less */

    
        </style>
    
          <script
      src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.12.2/less.min.js"></script>
    
    </head>
    <body>
        <!-- obsah -->

    </body>
    </html>

čtvrtek 9. května 2019

Jak dostat font-display do fontů z Googlu

Při dalším ladění "našeho projektu" jsem se rozhodl vyřešit poznámku v Pagespeed Insights / Lighthouse (po pravdě jsem to vyzkoumal v Auditu v Nástrojích pro vývojáře v prohlížeči Chrome):

Diagnostika - Zajistěte, aby text při načítání webfontů zůstal viditelný

Pomocí funkce font-display stylů CSS zajistěte, aby byl text při načítání webfontů viditelný uživatelům. Další informace.

"Další informace" odkazují na článek Controlling Font Performance with font-display, podle kterého je třeba doplnit do definice písma přístup k vykreslení
@font-face {font-display: fallback; ... }
Prosté? Ne tak moc, když importujete, a chcete importovat, webová písma přímo od Googlu. Jako třeba
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext');
Je tu takový drobný paradox, jak poznamenávají v článku Google Fonts and font-display s osvětlením situace dalšími užitečnými tipy:

Google Developers suggests using Lighthouse -> Lighthouse warns about not using font-display on loading fonts -> Web page uses Google Fonts the way it's suggested on Google Fonts -> Google Fonts doesn't supports font-display -> Facepalm.

Jednoho by z toho...

Ale zpět k projektu. Máme tu {less}, Grunt (zatím ještě) a Node (samozřejmě). Importované definice se do výsledného stylu vloží celé. Někdo přeci musel už připravit nějaký plugin... Dva dny jsem (mimo jiné práce) hledal, ale nenalézal. Našel jsem a vyzkoušel nějaké jiné pluginy, ale bez úspěchu.

A pak najednou na mě vyskočí přesně to, co hledám od začátku: dkrnl/postcss-font-display. Tento PostCSS plugin vloží do všech definic @font-face ve style kýžený parametr font-display. Hotovo. Uff :-)

pátek 20. července 2018

Jak na dlouhá "slova" na webu?

Jsou věci, co se vrací jako bumerang. Třeba potřeba se popasovat s nezalomitelným textem, respektive dlouhými slovy. Přesněji "slovy". V praxi jde, pokud nebudeme brát v potaz Němčinu, o emailové a webové adresy a parametry notebooků a telefonů, které produktový manažeři s oblibou naperou do názvu, oddělené lomítky a bez dostatky mezer, na kterých by se text mohl v prohlížeči zalomit. Samozřejmě tyto nešvary se připomenou až s vyladěným layoutem (jsem si myslel) a ostrými daty.

První věc, která opravdu nejde ignorovat. Dlouhé "slovo" rozstřelí layout ve flex-boxu. Boxíky postižených produktů se roztáhnou. Zafunguje malé kouzlo. Stačí nastavit na item ve flexu

min-width: 0;
Minimální šířka nemusí být nulová, ale musí být definovaná. Více

Pak to chce nějak ošetřit samotný text. Při googlení je potřeba zohledňovat stáří rad a návodů. Co platilo před rokem dnes už neplatí, nebo nemusí platit. V CSS lze nastavit pravidla pro dělení a zalamování slov. V kombinaci s media query jde o dobrou pojistku zachování funkčního layoutu a čitelného textu. Použijme třeba podle Dealing with long words in CSS | justmarkup něco jako

.hyphenate {

  overflow-wrap: break-word;

  word-wrap: break-word;

  -webkit-hyphens: auto;

  -ms-hyphens: auto;

  -moz-hyphens: auto;

  hyphens: auto;

}

Více

Na všechno styly ale nestačí. Správnému dělení slov pomůžeme znakem měkké dělení. Hojně se řeší, jakou formu zápisu znaku volit, ale aktuálně by to mělo být použití entity


Pročti si

Rovnou jsme se dostali i k HTML5 tagu

<wbr>
který slouží k označení místa, kde se může v případě potřeby text zalomit, ale bez "-". To je přesně to, co je dobré vrazit za výše zmíněná lomítka v názvech.

Dřív se toto nahrazovalo využitím třeba tenké mezery  . I další entity, jako třeba &zwnj; a &zwj; můžou najít uplatnění.

Obecně se řešení problémů s dlouhým textem věnuje článek Handling Long and Unexpected Content in CSS | CSS-Tricks.

Toto neberte jako přesný návod, spíš soupis poznámek k navedení, kde hledat nápovědu k dané problematice.

pondělí 11. září 2017

Bootstrap 4 Beta - další hluboká orba

Po až příliš dlouhém plácání se s Alfou přišel konečně (před měsícem) Bootstrap 4 Beta. A stejně jako už dříve nutila každá nová Alfa verze více či méně překopat v bláhové naději projekt rozběhnutý na její předchůdkyni, musíte i nyní vzít rýče a vidle a zarýt hluboce do kódu. Pokud tedy doufáte, že se každá nová Alfa i Beta verze více a více blíží verzi finální a současně věříte, že má smysl projekt upravovat v menších postupných krůčcích namísto velkého třesku.

Na štěstí pro své duševní zdraví nyní na Bootstrapu nic velkého nevyvíjím a i ten zmíněný projektík už mám na Gitlabu a pro upgrade Bootstrapu jsem si připravil branch. Po prvním načtení webu s novým bootstrapem jsem raději noťas zaklapl a šel spat.

Na další kolo se připravuji studiem rozdílů mezi první Betou a poslední Alfou Upgrade Bootstrap 4 Alpha 6 to Beta. Zkusím asi i tamtéž doporučený on-line nástroj Bootstrap 4 Upgrade (až bude umět Betu). A budu se "těšit" co přinese Beta 2.

úterý 31. ledna 2017

Animovaná Ajax Loading ikona čistě v CSS

Nedávno jsem si v rámci nasazování animované ikony v SVG pro Ajaxové nahrávání poznamenal i odkaz na Best CSS-SVG Loaders and Spinners na Code Geekz. Kdyby jsem si na to vzpomněl včas, nemusel jsem znovu prohledávat internety při zdobení jednoho projektu zase animovanou ikonou pro Ajax (tedy loader či spinner), tentokrát ale čistě v CSS. Několik vybraných odkazů...

How To Make a Loader na W3Schools.com - pěkné, jednoduché a s vysvětlením
SpinKit | Simple CSS Spinners - řada prostých jednobarevných motátek, skládátek a jiných animovátek
Single Element CSS Spinners - několik motátek s online možností obarvení, všechny si vystačí s jediným "divem"!
CSS Load.net - Spinners in pure CSS and HTML - přehršel rozličných motátek s on-line nastavováním

Určitě si taky vyberete. :-)

čtvrtek 22. prosince 2016

Jak JavaScriptem na pseudo elementy?

Upravit elementy elementy HTML stránky? Žádný problém! Máme DOM, máme jQuery... Změnit styly? V jQuery máme metodu .css(). Ale... Co to? No ano! Pseudo elementy jako ::before nebo ::after se takto jednoduše změnit nedají! Musí se to "kacknout". Jak? Pěkně to servíruje článek Modify pseudo element styles with JavaScript od Pankaj Parashara.

Osobně jsem úspěšně ozkoušel Metodu 3:
$('<style>.red::before{color:green}</style>').appendTo('head');

(samozřejmě, že to taky umím bez jQuery)

úterý 6. prosince 2016

Pár kusých poznámek na téma barvičky a Sass

Tentokrát jen pár kusých poznámek na téma "barvičky a Sass". Řešil jsem automatické odvozování odstínů zadané "základní barvy" (pro pozadí) a nalezení kontrastní barvy, aby na tomto pozadí byl text vždy čitelný.

Sass je na práci s barvami vybavený dost dobře. Nastuduj si Module: Sass::Script::Functions — Sass Documentation. K výše uvedenému zadání mi byly užitečné hlavně funkce lightness($color), lighten($color, $amount) a darken($color, $amount).

Jak na kontrastní barvu jsem dohledal postupně na How to dynamically change text color based on a background color, Compass Color Contrast | Compass Documentation, How to get an accurate contrast color with Sass – Medium.

A dále pak na Sass text-contrast mixin, Sass text-contrast mixin a nakonec pro změnu Sass text-contrast mixin. To jsou různé verze téhož. Výsledek se mírně liší. Však se podívej.

Trochu barevné teorie načerpej z HSL and HSV na Wikipedia a Barevný model – Wikipedie.

S přepočtem barev v různých barevných modelech včetně HSV si pohraj s Color Calculator nebo složitějším Color Wheel - Color Calculator na Sessions College. Na vytvoření celých barevných schémat použij RGB Hex HSL HTML | Colour Calculator | Colour Scheme Tool nebo notoricky známý Barevný kruh | Barevná schémata - Adobe Color CC.

sobota 29. října 2016

Responzivní image mapa? Nečekaný oříšek

Image-map je docela dost stará záležitost. V podstatě jde o to buďto určit souřadnice kliknutí na obrázek (server-side - parametr ismap pro html tag img) nebo, běžnější použití, přiřadit určitým částem obrázku odkaz (client-side - html tag map). Udělat správnou imagemapu nebylo nikdy jen tak a buďto to chtělo opravdu dobrou představivost, nebo schopný nástroj. Nikdo je neměl nikdy myslím moc rád. A co teprve, když se takový relikt minulosti střetne s posledními webovými trendy - konkrétně s responzivitou? No to je pak prů.. problém. Když pěkně stylem zmenšíte obrázek, nemáte jak automaticky přepočítat souřadnice mapy.

Samozřejmě jako na všechny neřešitelné html/css problémy najdete řešení celkem rychle:

Na image map fungující v responzivitě existují pluginy, třeba:
jQuery RWD Image Maps
Image Map Resize
Teoreticky by šly zadat souřadnice v mapě procentuálně (což při úpravě stávající image mapy znamená nějak sofistikovaně přepočítat), ale to prý stejně nefunguje všude.
Našel jsem i nějaké css3 řešení, které ale kdoví jak kde funguje.

Osobně bych ale doporučil mapu nezmenšovat a nechat ji scrollovat. Na to malé se stejně nedá trefit, takže je to vlastně nepoužitelné.

úterý 11. října 2016

Animovaná Ajax Loading ikona v SVG?

Scalable Vector Graphics - SVG - oslavilo (-a?) nedávno 15. narozeniny a pět let je už "dospělé". Dosud ale není v prohlížečích plně podporováno (viz Can I use... svg) a třeba u Googlu z Chrome výpárávají již zabudovanou podporu animací SMIL (také Can I use... svg-smil).

A přitom právě "samochodná" animace je užitečná třeba pro animované ikony pro Ajax loader. Můžete si je vygenerovat třeba na webu loading.io - Your SVG + GIF Ajax Loading Icons (ano, tam získáte i CSS a GIF verze), nebo na SVG Loaders - Sam Herbert potažmo GitHub - SamHerbert/SVG-Loaders: Loading icons and small animations built with SVG and CSS, kde jsou fakt sexy kousky. Další zdroje nabízí Best CSS-SVG Loaders and Spinners na Code Geekz.

Síla použití těchto ikon se projeví při vložení do css jako "data:image".

Ale co je to vlastně platné, když Chrome 45 a Opera 32 animace SMIL neschvaluje, zatím jen stížností v konzoli. Ať to takto zůstane dlouho. ;-)

středa 15. června 2016

embedresponsively.com zresponzivní i nezresponzivnitelné

Responzivní, tedy velikosti obrazovky přizpůsobivý web je dnes samozřejmostí (i když výjimky jsou povoleny). Základem jsou správně napsané CSS pro správně poskládané HTML. Jsou ale elementy, které standardním HTML konstrukcím a CSS definicím odolávají. Těmi jsou hlavně vložené (embed) externí kódy s elementem iframe. S jejích zvládnutím vám pomůže embedresponsively.com. Vygeneruje vám kód pro YouTube, Vimeo, Dailymotion, Google Maps, Instagram, Vine, Getty Images a pár dalších služeb. Princip je celkem jednoduchý a určitě se jím dá inspirovat obecně.

A jak to vypadá? Například pro ukázkové YouTube video http://youtube.com/watch?v=QILiHiTD3uc, které je Blogger vloží takto...

...vygeneruje embedresponsively.com kód...

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>

...což vypadá takto...

Ono to tu tak úplně nevyzní, ale v reálu se to jeví velmi zajímavě! :-)

čtvrtek 28. května 2015

Jak psát HTML, CSS a JS správně?

I když vás k tomu nikdo nikdy nevedl, stejně nakonec sami nejspíš dospějete do fáze, kdy budete chtít psát kód dobře. K tomu vám dopomoz Coding conventions - Wikipedia, the free encyclopedia, kde vás navedou mimo jiné na google/styleguide · GitHub a tam, pokud jdete po CSS a HTM a JS jako já, vám naservírují Google HTML/CSS Style Guide a Google JavaScript Style Guide.
Třeba zjistíte, že vlastně HTML a CSS píšete tak nějak už nějaký čas zcela samozřejmě podle dané specifikace na 99 %. ;-)

pondělí 16. února 2015

Preprocesory css na stříbrném podnose

CSS preprocesory nejsou žádnou novinkou, nicméně stále není jejich používání samozřejmostí i tam, kde by jejich využití bylo opravdu hodně užitku. Nicméně právě toto je třeba před nasazením preprocesoru (myslím tím zapojit css preprocesor do systému práce, ne jen v tom jen tak něco přišmrdlávat) dobře zvážit. A také je potřeba si správně vybrat!

K tomuž nám dopomož projekt CSS PREprocessors s přehledem a porovnáním vlastností Less, Sass a Stylus, momentálně nejběžnějších css preprocesorů, porovnáním možností kompilerů a dalšími informacemi.

Stejným tématem se také zabývá článek Sass vs. LESS vs. Stylus: Preprocessor Shootout na oblíbeném serveru Tuts+.

Spíše jako zajímavý pohled do (z) historie si přečtěte ještě CSS preprocesory: méně psaní, vyšší efektivita na Zdroják a 8 CSS preprocessors to speed up development time na CatsWhoCode.com.

neděle 15. února 2015

Čistě css ikony - littlebox a další

Už nějaký čas se u webařů těší oblibě Font Awesome, the iconic font and CSS toolkit. Díky tomuto "písmu" dostáváte balík vektorových ikon, které snad obarvíte, zvětšíte, zmenšíte... protože je to "font" a ne zkostnatělá bitmapa nebo neohrabaná SVG. A z nepřeberné řady ikon si jistě vyberete.
Můžete ale zajít ještě dál a díky littlebox použít ikony vytvořené čistě v css! Stahuj z cmaddux/littlebox · GitHub.

P.S.: ...koukám koukám pure css ikonami se zabývá mnohem víc lidí. Ono je to výzva. Podobně jako stavět eiffelovku ze sirek ;-)

úterý 30. prosince 2014

SpritePad - vytvoř si sprite online

On-line webová aplikace SpritePad - Create and edit css sprites nabízí možnost snadno a rychle seskládat sprite pro použití v css. Pokud ještě trik spritů neznáš (v tom případě ti budu tykat): místo X obrázků se do css "natáhne" jen jeden a pomocí background-position se posouvá tak, že v každém prvku je vidět požadovaný obrázek či ikona. Dobré také pro "hover efekt", kdy nedojde ani k čekání na dotažení obrázku a netřeba tak řešit preload. Na druhou stranu vytvoření sprite je trochu pruda. Byla :-)

'via Blog this'

úterý 14. října 2014

Nový Chrome 38 přichází s font-stretch!

Nový Chrome 38 přichází s podporou css3 parametru font-stretch známého z FF a řeší tak problém špatného zobrazení Arial Narrow v Chrome 37 kvůli zavedení DirectWrite. Tímto návrhy oprav v mém příspěvku "Marenkův bloček: Nový Chrome 37, DirectWrite a Arial Narrow (SOLVED?)" padají, kromě použití Google Fontu Open Sans Condensed.

Dík za těch pár týdnů nervů s nespokojenými klienty :-(

čtvrtek 4. září 2014

Firefox místo bold definuje bolder a není to dobře, je to špatně

Malý podraz od Firefoxu - tagy b a strong Firefox defaultně definuje jako bolder. To vede k nežádoucímu různému vykreslení písma v různých prohlížečích. Proto nezbývá než doporučit default definici

b, strong {

    font-weight: bolder;

}

přebít vlastním stylem

b, strong {

    font-weight: bold;

}

Děkuji za pozornost. Ach jo...

pátek 29. srpna 2014

Nový Chrome 37, DirectWrite a Arial Narrow (SOLVED! Ale jinak, než byste čekali.)

Změna situace: Nový Chrome 38 přichází s podporou css3 parametru font-stretch známého z FF a tak řeší dále popisovaný problém. Tímto také padají dále uvedené návrhy oprav, kromě použití Google Fontu Open Sans Condensed.

Nový Chrome 37.xxx přichází (konečně?) s implementací DirectWrite, což má konečně vypisovat na Windows fonty hezky. Prý. Nicméně to přineslo malý problém – Chrome přestal „znát“ „Arial Narrow“ (a zřejmě i další). Patrně lze narazit na problém s nastavení DPI pro obrazovku a další překvapení.

Řešením bude nejspíš použití jiného fontu. Nicméně DirectWrite se dá vypnout nastavením flagu - chrome://flags/#disable-direct-write
(aktivace této položky znamená deaktivaci DirectWrite, trochu po haluzi)

Viz též:

P.S. (SOLUTION?):

Podle aktuálních zpráv se chová k fontu Arial Narrow takto hnusně Chrome i ve verzi 39. Je třeba tedy provést "opravu" webu. Font Open Sans Condensed by byl vhodný, ale je přeci jen odlišný a znamená to hotový web celý "přestylovat". Tudy (zatím) ne.

Pak je tu možnost použít Arial Narrow z AllFont.net. Tady mám poněkud pochyby o legálnosti. Nicméně vydáte-li se touto cestou, záhy narazíte na zablokování písma stahovaného přímo z AllFont.net přímo Chromem. Je třeba si styly a soubory písma (předpokládám, že budete potřebovat jak Arial Narrow, tak Arial Narrow Bold a i další řezy) stáhnout a nahrát na svůj web. Při zachování jména fontu "Arial Narrow" ale zřejmě dochází k nějaké kolizi - v MSIE je veškerý text najednou kurzívou a ve FF je to nějaké nepěkné. Pomohlo mi přejmenování písma na "Arial Narrow Spare". Při vhodném pořadí písem v definici "fint-family" pak písmo v MSIE vypadá pořád stejně, ve FF víceméně stejně a v Chrome je konečně Arial Narrow zase "narrow".

Výsledný kód tedy natahuje do webu samostatné css s písmem:



<link href="/css/font/arial-narrow.css" rel="stylesheet" type="text/css" />

Definici fontu je upravena takto (pokud požíváte "bold" je samostatný font potřeba, jinak je to rozplizlé):



@font-face {

  font-family: 'Arial Narrow Spare';

  font-style: normal;

  font-weight: 400;

  src: local('Arial Narrow Spare'), local('ArialNarrowSpare-Regular'), url(d0eb64ed2b91fe9a67f7800c1b14868b.woff) format('woff');

}

@font-face {

font-family: 'Arial Narrow Spare';

font-style: normal;

font-weight: 700;

  src: local('Arial Narrow Spare Bold'), local('ArialNarrowSpare-Bold'), url(de76819016c676e170294c3f132497dc.woff) format('woff');

}

A definice font-family vypadá takto (font-stretch je pro FF pořád potřeba):



body,table,input,select,textarea,tt,input,button {font-size:14px; font-family: "Arial Narrow","Helvetica Narrow","Helvetica Condensed","Arial Narrow Spare","Arial CE",Arial,"Helvetica CE",sans-serif; font-stretch: condensed;}

(Arial Narrow, Arial Black, Wrong Font, Bad Fonts)

sobota 21. června 2014

The Layered Look: Better Responsive Images Using Multiple Backgrounds

The Layered Look: Better Responsive Images Using Multiple Backgrounds | CSS-Tricks:

"Parker has written for CSS-Tricks before, in his article Crop Top dealing with the positioning of fluid images. This is a great follow up to that, presenting another option in the never-ending responsive images saga. It's also an interesting contrast to yesterday's post on responsive images - so you can see how very different the approaches to this problem can be."

'via Blog this'

Social Media Share Buttons Impact On Website Performance

Social Media Share Buttons Impact On Website Performance:

"I did some testing to find out just how much social share buttons impact performance. I created a blank HTML page and added social media buttons, and then measured the amount of http requests and page weight using Pingdom Website Speed Test. The reason I am testing http requests is because every resource on your website must be downloaded from the server, so every resource comes at a cost to performance."

'via Blog this'

Tagy