《叶子是一页:我母亲的星期天饭,在饮食秩序中服务》

《叶子是一页:我母亲的星期天饭,在饮食秩序中服务》

2026年8月3日2 次浏览来源:Dev.to阅读原文

这是针对前端挑战的呈文 - 舒适食品版,完美登陆 我所造出之叶为一页.

为了我的CSS 艺术条目 我画了我妈妈的星期天餐: 香蕉叶上有十六道菜, 每道菜都放在泰卢古传统的地方。

对于"完美登陆",那幅画成了导航.

拍到叶子上的任何一盘 页面会带你去那道菜的菜 滚来滚去,然后按进食顺序走进餐中:先用克来,再用克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来,克来。

卷轴是服务令.

页面的结构是餐会的结构.

这是故意的不是餐厅。

没有菜单卡 没有预定表 没有画廊 一个家庭,一个星期天,八个课程, 和规则我的母亲执行 在每一个。

我最关心的部分是: 一张屏幕的阅读器 被服务于这顿与我妈妈一样的晚餐。

取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取 将目标放入叶子上将焦点移到他们打开的行道上,因此键盘和屏幕阅读器用户会和其他人一起出行.

Telugu标题带有lang="te",所以它们被发音为Telugu,而不是被mangled为英语.

航道导航标志你在哪里。

随着运动的减少, 平滑卷轴和Ghee-pour动画都安定下来。

Demo things to try:将稻丘(或ghee spoom)从叶子上打出并看它会把你带到哪里去.

从页面上方按下 Tab, 并观看跳过链接在其它东西之前出现 。

翻转并观看泰卢古导航跟踪你的航道.

开启减速运动,采取同样旅程的平静版本.

页面上的每一个视觉都是CSS.

没有图像,没有SVG,没有帆布。

旅程 概念来自吃自己。

在香蕉叶上,订单是信息: 尼伊比任何东西都重要, 佩鲁古总是持久。

大多数登陆页都发明了信息架构.

这顿饭已经吃了一顿, 比CSS网格大了三十岁。

我的全部工作就是不打破它。

重用"艺术"作"UI":我CSS"艺术"条目中的16个"干地"叶子随着"英雄"几乎不变而下降.

菜肴已经有名并有自拍行为;起落层只添加了每个菜肴的数据分节和一个小脚本来显示一个节拍的泰卢古名,再将您滚动到航道上并在那里移动焦点.

艺术和页面共享一种视觉语言,因为它们是字面上相同的代码.

作为设计,无障碍性不是审计:我这次在视觉前做了无障碍性决定,它改变了我构建的东西: 标题大纲为菜单: 1个h1,8个h2s,按服务顺序排列.

如果你只读标题, 你吃过饭。

每一个泰卢固语标题的lang="te".

没有它,屏幕读者尝试用英语的口音来表达泰卢固语,而我的母亲不会原谅发音.

在叶子导航后,焦点会以tabindex="-1"移动到目标航道.

将视线用户滚动到某处,而留下键盘用户则不是导航.

课程导航的亮点是使用有aria-current的交叉观测器,所以"我在哪里"暴露在辅助技术上,而不仅仅是被涂上.

每条航道上都滚动边距 所以粘接头从不吞下你刚刚导航的方向 更喜欢减少- motion 关闭平滑卷轴和 Ghee 动画在同一查询中。

冷静应该一致 我故意漏掉的东西: 这个挑战的"完美登陆"(Perfect Landing pool)充满了美丽的文化食品页面,几个有菜单,模式和预定表.

我切了所有的东西。

Modals是键盘体验通常会去死的地方,一张关于我母亲厨房的一页上虚构的预定表将会是谎言.

页面有一件事:它按顺序供餐。

我所自豪的是:我不断测试的句子是“盲目访客被送上这顿饭, 获得读取命令,焦点命令, 和服务命令是同一个命令 需要更多的约束 而不是代码,和约束转

分享