Autor Zpráva
Marek Štafl
Profil
Hezký den,
co jsem se dočetl na internetu, funkce calc() v CSS by měla fungovat v IE od verze 9. Mě to ale nefunguje ani ve verzi 11.
Mám něco špatně na tomto zápisu?

div.vertical-menu {
    position: fixed;
    right: 0;
    top: 50%;
    text-align: left;
    transform: translateX(calc(100% - 20pt - 10pt - 10pt)) translateY(-50%); /* EDGE */
    transform: translateX(calc(100% - var(--maticnsfsize) - 10pt - 10pt)) translateY(-50%);
    transform-origin: center center 0;
    transition: all .3s ease;
  }

V ostatních prohlížečích to funguje. Zkoušel jsem i expression() (ovšem to nevím, jaký je správný zápis), což by údajně měla být náhrada za calc() pro starší prohlížeče, ale taky nic.
Děkuji
pcmanik
Profil
Marek Štafl:
Používaš CSS premenné, ktoré v IE nefungujú. Konzola ti nič nehlási?
Marek Štafl
Profil
pcmanik:
Nepoužívám, respektive jo, ale proto je tam ten předchozí řádek bez proměnné - v Edge proměnné také nefungují, takže vezme ten první transform a ten druhý ignoruje a jede to. V konzoli v Edge je červeně podtržený jen ten první řádek, v konzoli v IE oba - jediné, co z toho vyčtu je, že je to podle něj špatný zápis, ale už nevyčtu proč.

IE: drive.google.com/file/d/0B9t29CVi2taCb2ZLcllKN0JfcjQ/view
pcmanik
Profil
Marek Štafl:
Bez calc ti to funguje? V tom prípade je očividne problém s tým že staré IE ho nevie použiť vo vnútri inej "funkcie", v tomto prípade translateX.

Mimochodom transform funguje az od IE10, v IE9 treba použiť -ms-transform: ...

Prípadne by som ešte skúsil tento zápis: transform: translate(calc(100% - 20pt - 10pt - 10pt), -50%);
Marek Štafl
Profil
pcmanik:
To je možné, že to nefunguje kvůli tomu, teď jsem si vzpomněl, že tam mám funkci calc() ještě jinde (jako hodnotu top) a tam to funguje, takže to nejspíš nefunguje jen v jiné funkci, jak píšeš (ani ten zápis s translate(x,x) nejde). Zkouším to v IE 11. Asi to budu muset pro IE řešit pomocí JS, což jsem nechtěl.
Každopádně díky
Chamurappi
Profil
Reaguji na Marka Štafla:
jediné, co z toho vyčtu je, že je to podle něj špatný zápis, ale už nevyčtu proč
Protože to nepodporuje.

Asi to budu muset pro IE řešit pomocí JS, což jsem nechtěl.
K čemu potřebuješ calc na sčítání v transformu, když tato vlastnost podporuje více hodnot najednou?

- 20pt - 10pt - 10pt
Tohle je translateX(-40pt).

100%
Tohle je translateX(100%).
Dát za sebe dva translateX je poměrně triviální, ne? Kdybys chtěl násobit nebo dělit, tak je to složitější (i když nejspíš také řešitelné přes scale).

Zkoušel jsem i expression() (ovšem to nevím, jaký je správný zápis), což by údajně měla být náhrada za calc()
Tam se zapisoval JS kód, šířku bys zjistil nejspíš this.offsetWidth, velikost pt bys nijak snadno nezměřil, mohl bys nanejvýš změřit a odečíst pixelovou šířku něčeho jiného. Ale expression už Explorer od verze 11 stejně nepodporuje.
Marek Štafl
Profil
Chamurappi:
To jsem nevěděl, že vlastnost transform podporuje zadání více hodnot stejného typu :)
Tohle funguje.
Díky moc!

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: