Oi, todo mundo.
Hoje vamos falar sobre os recursos do navegador e sobre
o que você pode fazer para garantir que seus sites tenham uma aparência consistente,
independentemente de como as pessoas estão acessando.
Então, mesmo que HTML5 tenha realmente empurrado os desenvolvedores do navegador para que todos
venham a esta implementação consistente, eles realmente diferem em exibição e
aderência às novas tags que estão saindo.
E à medida que os navegadores atualizam e mudam e novos navegadores saem, você terá que ter
em mente que nem todos estão olhando para sua página da mesma forma que você.
Portanto, é sua responsabilidade garantir que sua página funcione para um público amplo.
E, embora tenhamos falado muito sobre acessibilidade e diferentes maneiras de
acessar a web, isso se resume até às implementações mais básicas do navegador.
Então, primeiro, vamos falar sobre lidar com essas diferenças estilísticas.
A maneira mais fácil de eliminar as diferenças do navegador é
fazer algo chamado folha de estilo padrão.
E nessa folha de estilo, você realmente entraria e
apagaria qualquer um dos padrões do navegador para os diferentes elementos que são estilizados.
Então, quando você entra e você faz isso você pega, P, H1, H2, todos os títulos,
todas as diferentes tags semânticas e você iria entrar e você diria,
eu quero que eles tenham preenchimento de zero e margem de zero.
Mesmo os itens da minha lista não devem ter nenhuma decoração.
Então, enquanto isso vai garantir que você tem um olhar muito consistente,
eu tenho que admitir que vai fazer você página olhar absolutamente horrível.
Mas esse é o preço que você vai pagar para
que quando você começar a escrever suas próprias regras de estilo, você pode melhorar e
inevitavelmente melhorar e sua página vai ficar melhor e melhor.
Caso contrário, se você não usar o que chamamos de folha de estilo padrão,
você vai projetar sua página, e vai ser muito difícil
para você lembrar se você realmente marcou cada elemento que você está usando.
Uma das outras coisas sobre as quais queremos falar é lidar com o que chamamos de
propriedades não suportadas.
Primeiro, sabemos que todos os navegadores não suportam todas as tags HTML5.
Você já viu isso, em alguns dos códigos que você fez comigo.
Da mesma forma, nem todos os navegadores suportam todas as propriedades CSS3.
Existem algumas propriedades que parecem muito legais em alguns navegadores, mas
elas não são tratadas por padrão em outros navegadores.
Mas há uma maneira de contornar isso em muitos casos.
E o que isso é, é que os navegadores estão oferecendo prefixos.
Então, às vezes, eles os chamam de prefixos de navegador, às vezes prefixos de fornecedores, mas
o importante é que é uma correção muito rápida para
lidar com todas as opções não suportadas que você pode encontrar.
Quando vi os prefixos do navegador pela primeira vez, fiquei completamente intimidado.
Eu não sabia o que estava acontecendo, e parecia um pouco estranho,
e eu estava me sentindo preguiçoso e eu não queria lidar com isso.
Mas estou aqui para lhes dizer, é realmente muito, muito fácil usar esses prefixos.
Então, vamos dar uma olhada no que estou falando.
Você tem usado propriedades diferentes e esperamos que o navegador esteja funcionando.
Mas agora, para algumas dessas propriedades, você vai querer e adicionar um prefixo ou
um pouco na frente dele, como webkit, moz, ms ou o para Opera.
Cada um desses prefixos diz, hey, se você está neste navegador em particular,
isso é o que eu preciso que você faça para obter o visual que o designer está procurando.
Então, quais são algumas dessas propriedades que muitas vezes não são suportadas?
Eles incluem contagem de colunas,
que é uma maneira de adicionar várias colunas em seus parágrafos ou divs.
É uma maneira muito legal de dividir seu texto que é responsivo.
Então, se alguém redimensionar a página, os parágrafos realmente redimensionam.
Nós temos outra coisa chamada border-raio, que as pessoas realmente gostam de
usar porque acrescenta um pouco de borda arredondada para as bordas de seus elementos.
Uma terceira opção seria gradiente.
E gradiente é um tipo muito legal de cor de fundo que permite que a cor vá
de um tom de azul para talvez cinza ou vermelho ou qualquer coisa assim.
E dá-lhe uma aparência diferente.
Agora não há nenhuma maneira de
você realmente saber quais propriedades são suportadas e quais não são.
Então eu tenho este link aqui para um site chamado caniuse.com.
E o que caniuse.com faz é
que ele lista as diferentes propriedades e informa quais navegadores suportam e quais precisam dos prefixos.
Portanto, é uma boa idéia verificar esse site enquanto você começa a desenvolver sua página.
Mas, por enquanto, vamos em frente e olhar para um exemplo.
Então, neste exemplo, eu tenho um arquivo chamado prefixes.html.
E eu só quero mostrar rapidamente o que parece no Chrome aqui,
e também no Safari.
Eles parecem muito parecidos.
Mas há pequenos espaços onde a fonte pode não corresponder exatamente, ou
alguns do espaçamento podem não corresponder exatamente.
Então, se eu quisesse me livrar disso, se eu realmente quisesse ter certeza de que
as páginas parecem exatamente iguais, o que eu posso fazer é adicionar uma folha de estilo padrão.
Então vamos descer até aqui, e
eu vou dizer hey eu quero usar minha folha de estilo padrão.
E o que parece é que é um arquivo realmente louco onde eu listei
todos os diferentes elementos.
E depois disso, coloque coisas como,
eu não quero nenhum estofamento, eu não quero nenhuma margem.
Se eu tiver listas, livre-se do estilo da lista.
Faça isso o mais feio possível.
Então, se eu voltar aqui, você pode não ver uma grande diferença porque os navegadores
já são bastante simples, mas você pode ver as coisas se movendo ligeiramente.
Nós nos livramos de um pouco de coisas.
E da mesma forma, quando eu atualizar o Safari,
eles vão parecer um pouco mais parecidos.
Então, agora, vamos em frente e
olhar para o exemplo em que algumas das propriedades não são suportadas.
E eu vou voltar para o meu arquivo HTML, e eu vou dizer, hey, eu quero
usar minha folha de estilo para ir em frente e estilo algumas coisas que nem sempre são suportadas.
E as coisas que eu estou falando especificamente é,
vamos começar com essa idéia de contagem de colunas.
Como a contagem de colunas e o intervalo de colunas funcionam você diz ao navegador
quantas colunas você deseja e quanto espaço você deseja entre essas colunas.
Então, agora, quando eu atualizo, você pode ver que ele passou de
um parágrafo de bloco longo para que tudo está dividido.
E é muito legal porque é dinâmico.
Se eu redimensionar o navegador, tudo se move.
E essa é uma maneira muito legal de fazer isso.
Uma das outras coisas que eu gostaria de adicionar apenas como algo para olhar, é esta idéia
de em vez de ter um quadrado, eu quero meio que arredondar as bordas um pouco.
Então você faz isso adicionando o que é chamado de raio de fronteira.
Agora eu vou parar antes de atualizar a página, porque eu quero
te mostrar algo para o caso de você estar tão intimidado quanto eu quando comecei a fazer isso.
O raio da fronteira é apenas uma propriedade simples que existe há algum tempo.
E você pode vê-lo aqui, e você dá um valor.
O mesmo com contagem de colunas e intervalo de colunas.
Toda essa idéia de adicionar prefixos significa apenas, pegar sua propriedade regular
e colocar esses prefixos nele.
Você não precisa aprender nada de novo, você só precisa lembrar os nomes dos prefixos.
Então eu quero que você realmente tente abraçar isso, e
perceba que você não está fazendo nada muito espetacular.
Então agora que eu fiz isso, eu fiz 25.
E eu vou ir em frente e atualizá-lo.
E como você pode ver, eu meio que curvei as diferentes bordas ao redor do lado, o
que é muito legal.
A última coisa que vou fazer é adicionar um gradiente à cor.
Então agora eu sou uma cor azul consistente.
E é importante que não importa o que você dê um tipo de cor de fundo,
que você gostaria de ser usado, é o caso em que o gradiente não está acontecendo.
Mas agora, para gradiente linear, você está simplesmente dando duas cores que você gostaria de
ver e tipo de dizer o quanto você quer no início e no fim.
Então, novamente, eu tenho azul normal.
E agora, quando me atualizo, vou de um azul para um tipo de cinza claro.
Isso é legal e é um monte de código e é muito divertido jogar com ele.
Quero lembrá-lo que quando estiver desenvolvendo, não tente memorizar as coisas.
Não tente lembrar como fazer tudo.
Vou clicar com o botão direito do mouse aqui, e fazer Inspect Element.
Porque se você decidir mais tarde que é uma curva demais, ou você não gosta dessa
cor, o que você não quer fazer é digitar, salvar, atualizar, digitar, salvar, atualizar.
Fica muito irritante.
Então, em vez disso, eu vou direto aqui para minha seção e eu vou olhar,
e você pode ver em Inspect Element que ele disse que eu não usei o prefixo moz, e
eu não usei o prefixo Opera, porque eu não precisava.
Sou o Chrome.
O que posso fazer é vir até aqui até o raio da fronteira e mudá-lo.
Em vez de 25 pixels, se eu quiser menos de uma curva, eu posso torná-la 5 pixels.
Você pode ver isso acontecendo em tempo real.
Se quiser fazer parecer loucura, pode fazer 50 pixels.
Você também pode usar porcentagens se quiser.
Então eu vou em frente e colocar em 15%.
Então é meio que jogar com todas essas coisas dinamicamente e, em seguida,
uma vez que você obter um valor que você realmente gosta, copiá-lo e colocá-lo em seu arquivo CSS.
Então prefixos do navegador é apenas algo para jogar que pode ser divertido.
Pode ser frustrante.
Mas o mais importante é que você deve perceber que é muito simples.
Uma das coisas que você pode fazer ao adicionar prefixos é perceber que,
por enquanto, a coisa mais fácil de fazer é adicionar esses prefixos manualmente.
Coloque na propriedade que você quer colocar, digamos, limite de raio.
E então entrar e adicionar webkit, moz, as diferentes coisas como essa.
Quando você começar a usar prefixos,
o que você vai fazer é adicioná-los manualmente.
Se você sabe que você tem um raio de fronteira, você vai ir em frente e fazer o raio de fronteira
e, em seguida, adicionar esse moz, o webkit, coisas diferentes como essa à mão.
À medida que você se torna mais experiente e talvez queira experimentar coisas diferentes,
há maneiras de automatizar a adição desses prefixos.
Se você estiver usando um editor como o Sublime,
você pode realmente colocar pequenos pacotes lá onde você pode controlar se
você quer ou não que Sublime adicione nesses pacotes sempre que eles virem propriedades diferentes.
Você também pode usar programas externos que alterarão dinamicamente seu código à
medida que as pessoas o carregam para colocar apenas os prefixos que eles precisam.
Se você se lembrar no meu exemplo, mesmo que eu estivesse usando o Chrome,
minha folha de estilos ainda tinha todos os prefixos diferentes.
Isso adicionaria automaticamente apenas os que você precisa.
Novamente, estes são legais, mas não vamos nos preocupar com eles agora.
Por enquanto, vamos nos concentrar no básico.
Então, para revisar, quando você começar a codificar,
quando você começar a fazer folhas de estilo, você vai querer
pensar em usar uma folha de estilo padrão para remover essas diferenças estilísticas.
E quando fizer isso, preciso que pense em algumas coisas.
Então, primeiro, essa folha de estilo padrão deve ser interna ou externa?
E espero que todos vocês disseram externo.
Porque se for interno,
vai substituir todas as outras coisas para as quais trabalhaste tanto para fazer.
Da mesma forma, quando você colocar um link para sua folha de estilos padrão,
certifique-se de que ele é o primeiro.
Porque a maneira como os navegadores funcionam é que vai folha de estilo, folha de estilo, folha de estilo.
Então, se você colocar o seu primeiro e, em seguida, a folha de estilo padrão,
ele vai sobrescrever tudo legal que você fez até agora.
Finalmente, lembre-se de que os prefixos do navegador
podem ajudar a remover algumas dessas diferenças causadas por opções não suportadas.
Mas você não quer usar demais.
Não coloque um prefixo em cada propriedade só porque você não tem certeza.
Em vez disso, você quer ir a esses sites como eu posso usá-lo e testá-lo e
realmente fazer um palpite educado sobre se você quer ou não usá-lo.
Estás mesmo a chegar longe nesta ideia de desenvolvimento web.
E espero que você esteja estilizando algumas páginas muito legais.
E eu quero que você seja capaz de usar todas as propriedades diferentes que existem lá fora.
Portanto, não se deixe intimidar pela idéia de que você pode ter que usar folhas de estilo que
você não escreveu ou que você tem que usar prefixos do navegador.
Você tem isso e eu sei que você pode codificar usando essas ferramentas diferentes.
Então boa sorte.