Corrigindo a renderização funky @ font-face no webkit
Basta adicionar esta linha de CSS à tag do corpo: body { -webkit-font-smoothing: antialiased;}
Continuar lendowebkit
TIL: capivara-webkit não depende do Qt
Mas não se preocupe, no OS X, o Homebrew torna isso tão fácil quanto: atualizando as fórmulas, com brew update instalando o binário construído, com brew install qt … espere, …
Continuar lendoSuavização de fonte no Firefox (Mac)
Tenho adorado a propriedade CSS de suavização de fonte em navegadores baseados em Webkit até agora, mas não havia nenhuma maneira até agora de fazer isso funcionar no Firefox, não …
Continuar lendoDeixar / redefinir a propriedade de exibição CSS padrão do WebKit para entradas de data e hora
Muitos desenvolvedores e estruturas de front-end alteram globalmente a exibição das entradas de formulário para bloco em linha ou similar. Infelizmente, isso interfere na renderização no Chrome. Portanto, se você …
Continuar lendoLivrar-se do redimensionador de área de texto do Webkit
Não precisa demorar tanto. Apenas use: .some-textarea-class { resize: none;}
Continuar lendoMelhore a renderização de texto no webkit
Para melhorar a renderização de fontes no navegador baseado em webkit, basta adicionar a propriedade CSS * { -webkit-font-smoothing: antialiased;} onde você quiser. Também funciona para a propriedade CSS3 @ …
Continuar lendoSimule o tamanho físico do iPad mini em iPads maiores
Quer obter uma estimativa de como as coisas parecem e se sentem em um iPad mini, mas não tem um? Tente adicionar isso ao seu CSS e verifique a página …
Continuar lendoDesativar overscroll no aplicativo da web para iPad
Para produzir uma sensação de app no navegador, às vezes é necessário desativar a rolagem nativa. Para evitar até mesmo o efeito de deslocamento, basta observar o evento touchmove no …
Continuar lendoForça os usuários a usar a orientação paisagem do iPad
Este recorte gira a página inteira quando o usuário está na orientação retrato. @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) { body { -webkit-transform: rotate(90deg); width: …
Continuar lendoAPI de notificação WebKit
Botão <button id=”button”>Show Notification</button> API de notificação WebKit document.querySelector(‘#button’).addEventListener(‘click’, function() { if (window.webkitNotifications.checkPermission() == 0) { notification = window.webkitNotifications.createNotification(‘icon.png’, ‘Notification Title Goes Here’, ‘Notification Content Goes Here’); notification.show(); } else …
Continuar lendoAlterar a cor de fundo para entradas autocompletadas no Google Chrome
O Google Chrome (e outros navegadores do webkit) altera a cor de fundo para amarelo nas entradas preenchidas automaticamente em um formulário. A abordagem mais comum que a maioria das …
Continuar lendoCMD + Z funciona no inspetor WebKit!
Se você depurar e editar seu CSS no WebKit Web Inspector, o CMD + Z desfará sua última alteração. (CTRL + Z para meus amigos do Windows.) Da mesma forma, …
Continuar lendoPeso negrito indesejado em fontes do MacOS Webkit
Tendo recentemente mudado de um ambiente de trabalho de PC para um Mac, uma coisa que estava me deixando louco era a sensação extra ousada de que o Chrome e …
Continuar lendoTruque CSS para fontes mais leves no Mac
Encontrei isso há alguns dias na documentação do WebKit. Se você é como eu e acha que as fontes no OS X são muito “grossas” no Chrome e no Safari, …
Continuar lendobackground-size e SVG
Se o que background-sizevocê deseja usar em um SVG background-imagenão respeita sua proporção, é necessário definir o parâmetro preserveAspectRatiocomo noneno elemento raiz SVG. <svg >=”http://www.w3.org/2000/svg” width=”96″ height=”96″ viewBox=”0 0 96 …
Continuar lendoEsconder texto de espaço reservado em foco
Para webkit e Firefox ::-webkit-input-placeholder{ color: #ccc; font-style:italic;} :focus::-webkit-input-placeholder{ text-indent: -999px}::-moz-placeholder{ color: #ccc; font-style:italic;}:focus::-moz-placeholder{ text-indent: -999px}
Continuar lendo