css快速掌握_5个帮助您掌握现代CSS的项目

css快速掌握

Many claim CSS is not a programming language. I agree — it’s tougher. A mastery of CSS requires skills in design, determination, inventiveness, experience, as well as coding (especially when using preprocessors such as Sass).

许多人声称CSS不是一种编程语言。 我同意- 这很难 。 精通CSS需要具备设计，判断，创造力，经验和编码方面的技能(尤其是在使用预处理器(如Sass )时)。

CSS suggests layouts and styles to the browser. A browser can interpret those suggestions whichever way it chooses and, even then, the user or device can ignore or override any properties. Creating high-performance code which works well across all devices and screen resolutions is a challenge that few attempt or successfully complete. However, the rewards can be exhilarating.

CSS向浏览器建议布局和样式。 浏览器可以选择任何方式解释这些建议，即使这样，用户或设备也可以忽略或覆盖任何属性。 创建在所有设备和屏幕分辨率下都能正常运行的高性能代码是一项极难尝试或成功完成的挑战。 但是，奖励可能令人振奋。

Starting with the easiest, the following project suggestions will help you on your journey to CSS mastery using books available at SitePoint Premium.

从最简单的开始，以下项目建议将使用SitePoint Premium上提供的书籍帮助您掌握CSS。

1.使站点易于打印 (1. Make a Site Printer-friendly)

Visit a site you’re working on and attempt to print (or print preview) a page. Are you happy with the results?

访问您正在工作的网站，然后尝试打印(或打印预览)页面。 您对结果满意吗？

HTML pages are a continuous medium which do not necessarily work well on printed media. Inappropriate sections, scaling, text sizes, column dimensions, and missing or cropped content all lead to an inaccessible printing experience that few developers consider.

HTML页面是一种连续的媒体，不一定能在印刷媒体上正常工作。 不适当的部分，缩放比例，文本大小，列尺寸以及缺少或裁剪的内容都会导致很少开发者考虑无法访问的打印体验。

Fortunately, print CSS can be developed within a few hours. It’s generally a matter of resetting styles (black on white), removing unnecessary sections (menus, hero images, forms, social media widgets, etc.), linearizing the layout, and reducing the paper and ink requirements.

幸运的是，可以在几个小时内开发出印刷CSS。 通常是以下问题：重置样式(白底黑字)，删除不必要的部分(菜单，英雄图像，表单，社交媒体小部件等)，使布局线性化并减少纸张和墨水需求。

Delve into Browser-based Developer Tools (from CSS Master) and Browser DevTool Secrets to discover how to examine and modify styles after switching to print rendering.

深入研究基于浏览器的开发人员工具 (来自CSS Master )和浏览器DevTool Secrets，以发现在切换到打印渲染后如何检查和修改样式。

Applying CSS Conditionally describes how to define @media query rules including print stylesheets.

有条件地应用CSS描述了如何定义@media查询规则，包括print样式表。

Consider your Strategy Guide to CSS Custom Properties (from New Frontiers In Web Design) to determine whether CSS variables could help with printing properties. Also consider Accessibility (from CSS Animation 101) to switch off animations or print them in the best state.

考虑一下CSS自定义属性的策略指南 (来自Web设计的新领域 )，以确定CSS变量是否可以帮助打印属性。 还要考虑可访问性 (来自CSS Animation 101 )以关闭动画或以最佳状态打印它们。

Finally, How to Create Printer-friendly Pages with CSS (from CSS Tools & Skills) provides a full print-optimization tutorial with tips to save ink and paper costs.

最后， 如何使用CSS创建易于打印的页面 (来自CSS Tools＆Skills )提供了完整的打印优化教程，其中包括节省墨水和纸张成本的技巧。

2.将现代CSS主题应用于现有站点 (2. Apply Modern CSS Theming to an Existing Site)

A single color scheme is boring! Everyone expects a dark mode option in their OS and applications, so why not add one to your website?

单一的配色方案很无聊！ 每个人都希望在其操作系统和应用程序中使用暗模式选项，那么为什么不将其添加到您的网站呢？

Until recently, theme switchers typically required an additional set of styles with JavaScript-powered switching controls. However, modern browsers make life easier with CSS Custom Properties (variables) and the prefers-color-scheme @media rule.

直到最近，主题切换器通常还需要使用JavaScript驱动的切换控件的其他样式集。 但是，现代的浏览器通过CSS自定义属性(变量)和prefers-color-scheme @media规则使生活更轻松。

Strategies for Theming (from New Frontiers In Web Design) provides a range of ideas and considerations when designing your new theme.

主题策略 (来自Web设计的新领域 )提供了在设计新主题时的一系列想法和注意事项。

Applying CSS Conditionally (from CSS Master) describes how to define @media query rules including prefers-color-scheme.

有条件地应用CSS (来自CSS Master )描述了如何定义@media查询规则，包括prefers-color-scheme 。

Finally, Modern CSS: Adding a CSS Dark Theme (from Modern CSS) provides a full dark-theme-enabling tutorial.

最后， 现代CSS：添加CSS深色主题 (来自Modern CSS )提供了完整的启用深色主题的教程。

3.重做表单布局 (3. Rework a Form Layout)

Examine a form on your website, such as an enquiry or registration form. Unless it was coded fairly recently, it’s likely to be implemented with container DIVs and float-based layouts which possibly break on smaller screens. Older forms may use unnecessary JavaScript or have poor accessibility.

检查您网站上的表格，例如查询或注册表格。 除非它是近期编码的，否则它很可能会用容器DIV和基于浮点的布局来实现，而这些布局可能会在较小的屏幕上破裂。 较旧的表格可能使用不必要JavaScript或具有较差的可访问性。

A Registration Form (from Form Design Patterns) describes the best ways to design, style, and code a form using HTML5.

注册表单 (来自“ 表单设计模式” )描述了使用HTML5设计，样式化和编码表单的最佳方法。

CSS Grid allows you to eradicate unnecessary markup and make bulletproof responsive layouts without resorting to media queries. The following CSS Grid tutorials will get you up to speed:

CSS Grid允许您消除不必要的标记并制作防弹响应布局，而无需诉诸媒体查询。 以下CSS Grid教程将帮助您快速入门：

• Production-ready CSS Grid Layouts (from New Frontiers In Web Design)

  生产就绪CSS网格布局 (来自Web设计的新领域 )

• Creating Layouts with CSS Grid (from Master CSS), and

  使用CSS Grid创建布局 (来自Master CSS )，以及

• CSS Grid Layout (from Jump Start Responsive Web Design)

  CSS网格布局 (来自快速入门响应式Web设计 )

Finally, Make Forms Great with CSS Grid (from CSS Grid Layout) provides a full tutorial which provides a grid-based form layout with float fallbacks for older browsers.

最后， 使用CSS Grid使表单更出色 (来自CSS Grid Layout )提供了完整的教程，该教程提供了基于网格的表单布局，并为较旧的浏览器提供了浮动后备。

4.使您的网站更快 (4. Make Your Site Faster)

At the start of 2020, the average web page requires a 2MB download which takes 20 seconds to fully appear on an average mobile device. CSS accounts for 65KB spread over seven files. That may not seem significant, but stylesheet properties can make a difference.

在2020年初，平均网页需要2MB的下载量 ，这需要20秒才能完全出现在普通的移动设备上。 CSS占65KB，分布在七个文件中。 这似乎并不重要，但是样式表属性可以有所作为。

Spend a few hours examining your existing site to determine whether it’s possible to replace or optimize images, fonts, and JavaScript effects with more efficient CSS. Your CSS code may grow, but overall weight will fall and performance will noticeably improve.

花几个小时检查现有站点，以确定是否可以使用更高效CSS替换或优化图像，字体和JavaScript效果。 您CSS代码可能会增加，但是总体重量会下降，性能会明显提高。

Testing Tools (from Jump Start Web Performance) and Debugging for UI Responsiveness (from CSS Master) explain how to use modern browser DevTools to assess performance and discover optimization targets.

测试工具 (来自Jump Start Web Performance )和UI响应性调试 (来自CSS Master )介绍了如何使用现代浏览器DevTools评估性能并发现优化目标。

Loading Assets on the Web (from New Frontiers In Web Design) describes how to use techniques such as critical CSS and progressive CSS loading to ensure stylesheets are loaded effectively. 20 Tips for Optimizing CSS Performance (from Modern CSS) provides a selection of practical tips.

在Web上加载资产 (来自Web设计的新领域 )描述了如何使用诸如关键CSS和渐进CSS加载之类的技术来确保样式表得到有效加载。 优化CSS性能的20条技巧 (来自Modern CSS )提供了一些实用技巧。

Finally, Jump Start Web Performance contains dozens of quick, more intensive, and life-changing development suggestions to ensure your site remains fast for everyone.

最后， Jump Start Web Performance包含数十个快速，更密集和改变生活的开发建议，以确保您的网站对所有人保持快速。

5.启动一个新项目或CSS组件 (5. Start a New Project or CSS Component)

The project suggestions above can be used to improve an existing site, but there are no limitations or constraints when starting a new project from scratch. Options to consider:

上面的项目建议可用于改进现有站点，但是从头开始新项目时没有任何限制或约束。 要考虑的选项：

1. Build an online résumé. Bonus points for ensuring it’s responsive, prints well, and encoding all assets into a single HTML file which can be sent via email. (Tip: avoid adding JavaScript to ensure it won’t be blocked by email systems.)

   建立在线简历 。 奖励点是确保它响应Swift，打印良好以及将所有资产编码到单个HTML文件中，该文件可以通过电子邮件发送。 (提示：请避免添加JavaScript，以确保它不会被电子邮件系统阻止。)

2. Build an interactive portfolio. A graphical list of all your sites with additional information when an item is clicked. A Grid layout is ideal but, if you really want a challenge, try a masonry layout. (CSS Grid cannot implement this yet, but consider how it could be achieved using CSS columns or a vertically ordered Grid layouts.)

   建立一个互动的投资组合 。 单击一个项目后，所有站点的图形列表以及其他信息。 网格布局是理想的选择，但是，如果您真的想要挑战，请尝试砌体布局 。 (CSS Grid尚不能实现此功能，但请考虑如何使用CSS列或垂直排列的Grid布局来实现它。)

3. Code a graphical design. Perhaps choose an attractive idea from Dribbble or a similar design community and code the HTML5 and CSS3. Bonus points for creating it without a framework or JavaScript!

   编写图形设计代码 。 也许从Dribbble或类似的设计社区中选择一个有吸引力的想法，然后编写HTML5和CSS3的代码。 无需框架或JavaScript即可创建积分！

4. Create CSS-only Images. Create a set of useful icons powered by pseudo-elements and CSS shapes, or build an image using gradients and shadows.

   创建仅CSS图像 。 创建一组由伪元素和CSS形状驱动的有用图标，或使用渐变和阴影构建图像。

5. Experiment with SVG and CSS animations. Try creating attractive logos, charts, progress bars, activity spinners, and more.

   试用SVG和CSS动画 。 尝试创建有吸引力的徽标，图表，进度条，活动微调框等。

Developer and browser tools:

开发人员和浏览器工具：

• The DOM, CSS and Animations (from Browser DevTool Secrets)

  DOM，CSS和动画 (来自浏览器DevTool Secrets )

• How to Use Gulp.js to Automate Your CSS Tasks (from CSS: Tools & Skills)

  如何使用Gulp.js自动化CSS任务 (来自CSS：工具与技能 )

• Jump Start Sass

  快速启动萨斯

• CSS Debugging and Optimization: Code Quality Tools (from CSS: Tools & Skills)

  CSS调试和优化：代码质量工具 (来自CSS：工具与技能 )

• CSS Debugging and Optimization: Developer Tools (from CSS: Tools & Skills)

  CSS调试和优化：开发人员工具 (来自CSS：工具与技能 )

• Life-Changing Diets (from Jump Start Web Performance)

  改变生活的饮食 (摘自Jump Start Web Performance )

• Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers

  Visual Studio代码：针对Web开发人员的端到端编辑和调试工具

CSS Grid ideas:

CSS Grid思路：

• Redesigning a Site to Use CSS Grid Layout (from CSS Grid Layout)

  重新设计网站以使用CSS网格布局 (来自CSS网格布局 )

• Easy and Responsive Modern CSS Grid Layout (from CSS Grid Layout)

  简单易用的现代CSS网格布局 (来自CSS网格布局 )

• Progressively Enhanced CSS Layouts from Floats to Flexbox to Grid (from CSS Grid Layout)

  从Floats到Flexbox到Grid的渐进增强CSS布局 (从CSS Grid Layout )

• Redesigning a Card-based Tumblr Layout with CSS Grid (from CSS Grid Layout)

  用CSS Grid重新设计基于卡片的Tumblr布局 (来自CSS Grid Layout )

• Better Responsive Structures with Grid Systems (from Jump Start Responsive Web Design)

  网格系统具有更好的响应结构 (来自快速启动响应式Web设计 )

Responsive CSS techniques:

响应式CSS技术：

• 14 Essential Responsive CSS Techniques

  14种基本的响应式CSS技术

• Responsive Design

  响应式设计

• Jump Start Responsive Web Design

  快速启动响应式网页设计

CSS transitions and animations:

CSS过渡和动画：

• CSS Animation 101

  CSS动画101

• Transitions and Animations (from CSS Master)

  过渡和动画 (来自CSS Master )

• Using CSS Transforms in the Real World (from Modern CSS)

  在现实世界中使用CSS转换 (来自Modern CSS )

Combining CSS with SVG:

将CSS与SVG结合：

• Animating SVG (from Practical SVG)

  SVG动画 (来自实用SVG )

• Using CSS with SVG (from CSS Master)

  将CSS与SVG结合使用 (来自CSS Master )

• Real World Use of CSS with SVG (from Modern CSS)

  SVG在CSS中的实际使用 (来自Modern CSS )

Now stop reading and get coding!

现在停止阅读并获取编码！

翻译自: https://www.sitepoint.com/master-modern-css-projects/

css快速掌握