Mantendo seu código de marcação CSS3 magro
Os desenvolvedores da Web podem economizar muito tempo usando uma sintaxe CSS3 mais sofisticada. Os usuários que visitam sua página estão esperando o tempo de carregamento mais rápido possível, o que torna sua responsabilidade manter o tamanho dos arquivos. Existem muitos truques de taquigrafia com CSS e especialmente sob o novo modelo CSS3.
Eu juntei algumas dessas idéias no guia abaixo. Também devemos abordar outras áreas, como a redução do seu código CSS. Existem ferramentas disponíveis no navegador para ajudar os desenvolvedores no processo de estilo, mas você gostaria de combinar códigos de acesso com essa redução de tamanho de arquivo para simplificar o processo de renderização do seu site..
Dicas básicas sobre formatação
Antes de irmos para a sintaxe CSS real, eu quero passar por cima do tópico como para escrever seu CSS. Se você está familiarizado com o design da Web, provavelmente já viu uma folha de estilo antes, provavelmente mais de uma vez. A primeira parte de cada comando é chamada de seletor. Isso tem como alvo o tipo de elemento que receberá os estilos adicionados dentro das chaves, também conhecido como propriedades.
Nível Inline
Com estilos in-line, cada propriedade é escrita uma após a outra com apenas espaços para separá-las. Esse método é melhor aplicado a seletores em que você precisa apenas de algumas propriedades. Você economizará espaço na página e percorrer sua folha de estilo será muito mais rápido. Caso você nunca tenha encontrado CSS in-line antes, adicionei um pequeno exemplo abaixo de segmentação de links de âncora HTML.
um color: # 648cc8; intensidade da fonte: Negrito; a: hover color: # 739cda; text-decoration: nenhum; a.alt cor: # bd4949! importante;
Nível de Bloqueio
Por outro lado, as propriedades de estilo de bloco são inseridas em uma linha por par de chave / valor e geralmente são recuadas para edições mais rápidas ao verificar o código. Cerca de 99% das folhas de estilo mais limpas que eu utilizo usam essa formatação, e isso se tornou um padrão da indústria para muitos designers. Se o seu seletor estiver usando mais de 6 ou 7 propriedades, essa é a melhor formatação a ser aplicada.
Quando você leva em consideração as muitas novas propriedades CSS3, também percebe a rapidez com que suas folhas de estilo são preenchidas. E muitas dessas propriedades oferecem suporte a cópias específicas do navegador que exigem quase duplicar entradas de código (como raio de borda). Você pode conferir meu exemplo de uma propriedade de bloco definida abaixo, segmentando um wrapper de amostra div.
.embrulhar display: bloco; preenchimento: 6 px 10 px; fundo: #FFF; raio de fronteira: 4 px; -moz-border-radius: 4 px; -webkit-border-radius: 4 px; -o-border-radius: 4px;
Nenhuma maneira de escrever CSS é especificamente melhor que a outra. Em última análise, é a sua escolha como desenvolvedor que você prefere estilo, e até mesmo isso vai de acordo com o projeto que você trabalha. É até comum encontrar CSS onde os designers misturaram os dois juntos! Eu pessoalmente sinto que “obras em andamento” tendem a ser mais fáceis com estilos de bloco, pois estou constantemente examinando a folha de estilo para fazer edições ou acréscimos. Mas para domínios com tráfego pesado, a redução do seu arquivo CSS é a melhor maneira de ir.
Mantendo-os magros
Ao utilizar os vários códigos curtos disponíveis em CSS3, você pode economizar muito tempo de desenvolvimento. A edição de elementos HTML se tornará muito mais fácil conforme você entende esse jargão que economiza tempo. Além disso, seu código aparecerá mais limpo e mais fácil de se ver.
A única desvantagem é que nem todos os navegadores suportam totalmente essas propriedades. Existem soluções alternativas para muitos dos problemas existentes, como no Internet Explorer e no Netscape. Felizmente, a Web está sempre progredindo e à medida que a CSS3 cresce em popularidade, nós, sem dúvida, experimentamos um crescimento na compatibilidade de navegadores também.
Transparência de cor RGBa / Opacidade
O novo RGBavalue não é exatamente um CSS3 propriedade, mas A transparência alfa é específica apenas para CSS3. Em vez dos valores comuns "Red Green Blue" você passar para a cor que você pode agora incluir uma quarta opção de transparência de cor. Devido a isso, os desenvolvedores da Web são feitos com PNGs transparentes quase inteiramente.
A sintaxe básica requer um valor de 0-255 nos primeiros três (3) slots e 0-1,0 na posição alfa. O intervalo de cores é específico para quanto de cada matiz (RGB) é visível, com 0 sendo nada e 255 cheio.
/ ** sintaxe ** / background: rgba (nome_do_valor, nome_do_valor, nome_do_valor, nome_do_valor, valor_de_ opacidade); / ** exemplo ** / div background: rgba (255, 255, 255, 0.3);
Compatibilidade entre navegadores
Outra propriedade opacidade pode ser usado em algumas circunstâncias. No entanto, isso afetará todo o elemento HTML e o conteúdo interno, não apenas o plano de fundo como você viu no meu exemplo.
Infelizmente, o Internet Explorer ainda não suporta o valor de cor RGBa. Você geralmente deve incluir uma propriedade de fallback com opacidade total para esses navegadores menos padronizados. Você configura isso com os mesmos valores, mas excluindo o quarto (opacidade). Seria algo parecido rgba (255, 255, 255)
Além disso, o Internet Explorer pode ser tratado de forma mais elegante por meio de condicionais. Você pode realmente verificar se o navegador está executando o IE e exibir um filtro proprietário do Microsoft CSS no comando. Eu demonstrei isso no meu exemplo abaixo (note que isso apareceria em algum lugar no seu arquivo HTML):
Raio da Borda CSS3
Eu li alguns tópicos de fórum confusos sobre a criação de bordas arredondadas com CSS3 - não tanto do lado de como é feito, mas com suporte a navegadores, os desenvolvedores da web estão lutando para que o código mais fácil seja incluído e funcione como esperado.
/ ** sintaxe ** / border-radius: parte superior esquerda superior direita inferior direita inferior esquerda;
o raio de borda a propriedade compartilha uma sintaxe semelhante à criação de uma borda padrão, exceto que neste caso estamos direcionando os cantos da caixa. Esta propriedade aceitará de 1 a 4 valores e cada um deles terá uma configuração diferente de cantos.
- 1 valor: Todos os quatro cantos são arredondados para o mesmo valor
- 2 valores: O primeiro valor se aplica a
canto superior esquerdoecanto inferior direitoenquanto o segundo valor atingecanto superior direitoeinferior esquerdo - 3 valores: Primeiro aplica-se ao
canto superior esquerdocanto, o segundo é tantoinferior esquerdoEcanto superior direitoenquanto o 3º e último valor é aplicado acanto inferior direito - 4 valores: Todos os 4 valores segmentam os cantos na seguinte ordem: superior esquerdo, superior direito, inferior direito e inferior esquerdo
/ ** exemplo ** / div border-radius: 4px 4px 8px 4px; div border-radius: 4px 4px 8px;
Então, no código acima, estamos usando raio de borda para aplicar um efeito arredondado 4px em tudo, exceto o canto inferior direito borda que obtém uma curva suavizada de 8 pixels. Se você notou, ambos os códigos aplicarão o mesmo efeito de estilo.
Compatibilidade entre navegadores
Agora o principal problema é que raio de borda é suportado apenas em alguns navegadores. O Internet Explorer 9 recentemente adicionou um ótimo suporte e o Opera também renderiza isso. No entanto, até mesmo o Opera criou sua própria propriedade com -o-border-radius visando seu mecanismo de navegador específico. Além disso -moz-border-radius é suportado pelo software Firefox / Gecko e -webkit-border-radius para o Google Chrome / Safari.
O código abaixo é um exemplo do meu modelo bare-bone para criar cantos arredondados com o maior suporte de navegador global.
div border-radius: 4px 4px 8px 4px; -webkit-border-radius: 4 px 4 px 8 px 4 px; -moz-border-radius: 4 px 4 px 8 px 4 px; -o-border-radius: 4 px 4 px 8 px 4 px;
Goste de uma sombra?
A outra faceta realmente impressionante do CSS3 é o suporte para caixa e sombras de texto. Este tem sido um problema para os desenvolvedores no passado, já que as imagens de fundo eram a única opção realista. Essa sintaxe realmente segue um papel de taquigrafia que é muito mais fácil do que as outras propriedades que cobrimos. É difícil lembrar a ordem correta dos valores-chave no início - mas quanto mais prática você colocar, mais fácil será.
Infelizmente o Internet Explorer é mais uma vez o estranho. Todos os outros principais navegadores, incluindo Firefox, Google Chrome, Safari e Opera, dão text-shadow propriedade. Os desenvolvedores tentaram construir seu próprio suporte ao IE, mas ainda são muito limitadores. A sintaxe básica é escrita da seguinte maneira:
/ ** sintaxe ** / text-shadow: cor de blur-radius com offset de deslocamento de x; / ** exemplo ** / div text-shadow: 2px 2px 1px # 111;
O deslocamento X e Y informa ao navegador quanto à direita e a sombra deve aparecer. Você pode usar valores negativos para posicionar a sombra acima e acima, respectivamente. Mas isso parece muito estranho, então eu recomendo inteiros positivos. Além disso, o valor do raio de desfoque pode ser usado para suavizar as bordas rígidas, se a sombra do texto parecer não natural.
Esta sintaxe é apenas olhar para a notação básica ao criar um único efeito de sombreamento. Os designers altamente avançados estudaram até mesmo para criar várias sombras simultaneamente! Eu faço referência a este incrível post do blog de abril de 2011, que detalha a imposição de sombras de texto. Se você tiver tempo, leia o conteúdo apenas para ter uma ideia dos recursos mais avançados e certifique-se de marcá-lo como uma referência futura!
Compatibilidade entre navegadores
O maior detrator que encontramos é o Internet Explorer. De tempos em tempos, a Microsoft lançou seu próprio mecanismo de renderização de navegador, que tem desempenho inferior ao máximo. Agora, mesmo com o CSS3 ocupando os reinados nas sombras de texto, o IE ainda está por trás. Existe um ótimo site de demonstração onde você pode encontrar exemplos de código e comentários condicionais tradicionais de CSS..
Basicamente, você está procurando verificar se o navegador que seu usuário está executando corresponde a qualquer versão do Internet Explorer 9 ou inferior. Em seguida, usando filtros MS, podemos aplicar uma sombra em qualquer elemento de texto (acima, estamos usando um parágrafo).
Facilitando Transições
CSS3 transição é a propriedade mais badalada no mercado de design desde os flapjacks da vovó! Web designers têm feito tanto barulho sobre as transições CSS puras, apesar de o suporte ser limitado principalmente aos navegadores Webkit. É claro que você pode utilizar propriedades secundárias para o Mozilla e o Opera. Mas a notação abreviada é realmente cativante, especialmente se você estiver contra as animações JavaScript por qualquer motivo.
Primeiramente, vamos dar uma olhada na propriedade de transição original. Isso exigirá 4 valores que você também pode dividir em propriedades. Eles correspondem com a transição propriedade(qual é o efeito), duração(quanto tempo para desenhá-lo), função de temporização(mudanças na velocidade sobre a animação), e demora(número de segundos para esperar antes de animar).
/ ** sintaxe ** / transição: atraso na função de tempo da duração da propriedade; / ** exemplo ** / img propriedade da transição: opacidade; duração da transição: 2s; função de temporização de transição: facilidade de entrada; atraso de transição: 0,5s;
Você deve intuitivamente entender o propósito da maioria dessas propriedades, exceto possivelmente a função de tempo. Embora confuso no início, essa propriedade simplesmente anima sua transição de forma diferente, de modo que o efeito será iniciado mais lentamente, mais lento ou algo semelhante.
W3 Schools tem uma função de cronometragem doc online que lista todos os valores possíveis que você pode experimentar. Eu sempre me encontro pesquisando esses guias, mas eles fazem marcadores tão úteis.
Compatibilidade entre navegadores
Agora vamos trazer suporte completo ao navegador. Por padrão, a propriedade de transição é só suportado por versões mais recentes do Safari. No entanto, muitos usuários ainda exigem -webkit prefixo que também se aplica ao Google Chrome e mecanismos de renderização semelhantes. Abaixo está uma “finalizado” modelo de bloco de código Eu recomendo salvar e usar se você precisar de suporte de transição da maioria dos navegadores da web.
img transição: opacidade 2s facilidade em 1s; -webkit-transition: opacidade 2s easy-in 1s; / * chrome, safari, flock * / -moz-transition: opacidade 2s easy-in 1s; / * mozilla + gecko * / -o-transition: opacidade 2s facilidade em 1s; / * opera * /
Efeitos de traço de texto
Esta propriedade não é enorme e você não encontrará muitos web designers usando hoje. Mas você pode usar traço de texto para criar alguns efeitos realmente interessantes com suas fontes. Os navegadores Webkit, como o Safari e o Chrome, são os únicos verdadeiros apoiadores dessa propriedade até o momento. Opera e Firefox têm dificuldade em renderizar objetos de texto com os mesmos contornos.
/ ** sintaxe ** / p -webkit-text-stroke: largura da cor; / ** example ** / p -webkit-text-stroke: 1px # 222;
Compatibilidade entre navegadores
Se você sentir necessidade de efeitos de traço de texto, inclua sempre uma cor de backup. Mozilla e Opera podem sobreviver, mas os usuários do Internet Explorer não têm outras opções. Infelizmente esta é uma das mais recentes propriedades CSS3 que não conseguiu suporte suficiente da comunidade de desenvolvedores de navegadores da web. Você deve passar algum tempo brincando com essa ótima ferramenta da Web criada especificamente para criar esses contornos de texto CSS3.
Dimensionamento de caixa
A propriedade de dimensionamento de caixa oferece mais controle sobre a largura / altura total de qualquer elemento de bloco. Por padrão, a largura / altura + borda + margem + preenchimento compõem o tamanho total de uma caixa. No entanto, usar a caixa de borda no seu conteúdo, empurra todos os seus preenchimentos e margens interior para manter a largura exatamente igual. Existem apenas dois valores para essa propriedade, com content-box sendo o padrão.
div largura: 550px; preenchimento: 9px; dimensionamento de caixa: caixa de borda; / * width vai ficar em 550px * /
Como você pode imaginar, isso será útil em algum momento durante sua carreira em CSS. Preenchimento e margens podem ser uma dor real e quando você adiciona bordas, você tende a perder a faixa de pixels.
Compatibilidade entre navegadores
O Opera e o IE 8 suportam essa nova propriedade por padrão. IE7 e abaixo estão presos com a configuração da caixa de conteúdo, a menos que seus visitantes estejam usando o modo quirks. As únicas adições que você deve saber sobre o mecanismo de navegador especificamente direcionado para o webkit e para o Mozilla.
div -webkit-box-sizing: border-box; / * Safari / Chrome * / -moz-box-sizing: border-box; / * Firefox * / box-sizing: border-box; / * Opera / IE8 + * /
Colunas CSS3 puras
As colunas são um pouco complicadas com CSS3, mas podem ser realizadas com um código mínimo. As duas propriedades que você deseja focar são contagem de colunas e lacuna de coluna. A contagem faz referência ao número total de colunas que você deseja aplicar, enquanto a lacuna cria uma margem entre cada uma delas..
div # cols contagem de colunas: 3; intervalo de coluna: 10px;
No meu exemplo, podemos ver os # IDs de ID sendo usados como contêiner. Dentro dividimos o div em 3 colunas com um intervalo de 10px entre cada uma. Além disso, você pode definir largura da coluna que é usado para definir a largura total de cada coluna, em vez de listar um número sólido.
Compatibilidade entre navegadores
Qualquer coisa antes do IE8 simplesmente não será capaz de fazer uso dessa propriedade. Mas, como vimos em todos os exemplos, o Mozilla e o Webkit oferecem suas próprias soluções para vários navegadores. Se você precisar de um modelo, confira meu pequeno código de exemplo abaixo:
div # sidebar width: 210px; -moz-column-count: 3; -moz-column-gap: 7px; -webkit-column-count: 3; -webkit-column-gap: 7px; contagem de colunas: 3; intervalo de coluna: 7px;
Personalizado @ font-face
Você deve ter ouvido sobre o entusiasmo em relação às fontes personalizadas CSS3. Bem, usando a propriedade @ font-face, podemos importar estilos de fonte externos e usá-los como qualquer outra família. A sintaxe é um pouco complicada e você terá que gastar algum tempo para acertar. O bloco para @Tipo de letra é usado para definir um nome de família, depois você pode usar isso em seu família de fontes propriedades onde quer!
@ font-face font-family: 'MyNewFont'; src: url ('New_Font.ttf'), url ('New_Font.eot'); / * Internet Explorer apenas * / Então você vê acima eu não estou direcionando qualquer tipo de fonte específica, mas a sintaxe é o que deve se destacar. Observe que o Internet Explorer suporta apenas .eot tipos de fonte, enquanto .ttf e .otf são opções populares para os outros navegadores. Também de importância, você deve entender que você pode passar na fonte URLs de links diretos, ou seja,. url ('https://www.hongkiat.com/css3/fonts/myfont.ttf');
Não há problema real entre navegadores com essa configuração, pois todos os mecanismos de renderização podem analisar esses tipos de arquivos de fontes. Apenas lembre-se de que para o suporte do IE você deve incluir uma versão eot, bem como o original. Eu sinto que o artigo da W3 Schools tem um catálogo das informações mais importantes que você deve verificar.
Convertendo para CSS Miniatura
Este tópico é debatido com frequência, pois serve a um propósito diferente para cada projeto. Por um lado, os desenvolvedores da Web gastam muito tempo escrevendo suas folhas de estilo. Não há como criptografar esse tipo de dados de texto sem formatação e ocultá-lo dos olhos de espionagem. Se você está tentando impedir que outros roubem seu código descaradamente, o melhor que você pode fazer é confundir os estilos e remover todas as quebras de linha / espaços.
Esse processo pode ser rotulado como miniaturizando seu código. Geralmente, os desenvolvedores gravam o CSS no formato padrão e, em seguida, removem todo o espaço em branco antes de fazer o upload para o servidor da Web. Então você tem uma cópia local para editar rapidamente enquanto também fornece uma versão menor no projeto ao vivo. Este método pode obviamente ser útil para reduzir as cargas de página, além de manter sequestradores de código na baía.
O link que eu postei acima, levando ao Minify CSS, tem um ótimo material de leitura sobre o assunto. O site também fornece uma ferramenta baseada em navegador para remover esses espaços em branco e os principais retornos de seu código. Compressor CSS é outra opção ostentando uma interface simples que roda diretamente no seu navegador. Eu também ouvi coisas boas sobre o CSS limpo, embora eu nunca tenha usado o aplicativo.
Links Relacionados
Para continuar avançando, forneci seis links úteis em toda a Web. Isso inclui não apenas a notação abreviada, mas também guias úteis e tutoriais para acessar ao praticar esse novo código CSS abreviado..
- Guia do iniciante para CSS3
- Guia de taquigrafia CSS
- Você está usando o CSS3 adequadamente??
- Conteúdo CSS e gráfico de compatibilidade do navegador
- Aprimoramento progressivo de CSS3 + = Smart Design
- Índice completo de propriedades CSS / CSS3
Conclusão
É preciso muita dedicação e prática de escrever código CSS para construir um cronograma concreto que você possa seguir para cada projeto. A maioria dos web designers fica feliz em pegar novos projetos e idéias, então você certamente encontrará tempo para praticar essas úteis dicas de codificação. Tente copiar uma pequena folha de referência para sua própria conveniência, caso não encontre nenhuma folha de dicas ou, pior ainda, perca a conexão com a Internet.!
Você conhece outras propriedades ou atalhos CSS3 úteis? Nós gostaríamos de ouvir seus pensamentos e idéias nos comentários da discussão. Os desenvolvedores da Web estão pressionando por mais padronização dentro do W3C e claramente a transição está ficando mais fácil. O CSS3 oferece benefícios fantásticos e, se você conseguir dominar a codificação abreviada, isso manterá o tamanho do arquivo baixo e impedirá que os copycats roubem seu código..
