diff --git a/.github/workflows/size-label.yml b/.github/workflows/size-label.yml new file mode 100644 index 0000000000..a0bc0b6843 --- /dev/null +++ b/.github/workflows/size-label.yml @@ -0,0 +1,13 @@ +name: size-label +on: pull_request +jobs: + size-label: + permissions: + contents: read + pull-requests: write + runs-on: ubuntu-latest + steps: + - name: size-label + uses: "webdoky/size-label-action@main" + env: + GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}" diff --git a/.github/workflows/spellcheck.yml b/.github/workflows/spellcheck.yml new file mode 100644 index 0000000000..96de2c7105 --- /dev/null +++ b/.github/workflows/spellcheck.yml @@ -0,0 +1,149 @@ +name: spellcheck +on: [pull_request] +jobs: + prepare-translation: + outputs: + translation: ${{ steps.translation-check.outputs.translation }} + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + - id: changed-files + run: git diff --diff-filter=d --name-only ${{ github.event.pull_request.base.sha }} ${{ github.event.pull_request.head.sha }} > ./changed_files.txt + - name: Check translation + # Check there is only one translation change + # If there are more than one, the workflow will fail + id: translation-changes + run: | + changed_files=$(cat ./changed_files.txt) + if [ -z "$changed_files" ]; then + echo "No files changed" + else + translation_files=$(echo "$changed_files" | grep -E ".*\.md" || ./pass.sh) + echo "$translation_files" + echo "$translation_files" > ./translation_files.txt + fi + - id: translation-check + run: | + translation_files=$(cat ./translation_files.txt) + if [ -z "$translation_files" ]; then + echo "No translation files changed" + else + if [ $(echo "$translation_files" | wc -l) -gt 1 ]; then + echo "More than one translation file changed" + exit 1 + else + echo "translation=$translation_files" >> $GITHUB_OUTPUT + fi + fi + languagetool: + if: ${{ needs.prepare-translation.outputs.translation != '' }} + name: runner / languagetool + needs: [prepare-translation] + outputs: + has_matches: ${{ steps.check-spelling.outputs.has_matches }} + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + - name: Remove code blocks + run: | + file=${{ needs.prepare-translation.outputs.translation }} + sed -i '/```/,/```/d' $file + # Strip all macros + - id: strip-macros + run: | + file=${{ needs.prepare-translation.outputs.translation }} + # Remove all macros with no arguments + sed -i 's/{{[a-zA-Z_-]*}}//' $file + # Replace macros with one argument + sed -i 's/{{[[:alnum:]_-]*(\("[[:alnum:]_-]*"\))}}/\1/g' $file + # Replace macros with two arguments + sed -i 's/{{[[:alnum:]_-]*(\("[[:alnum:]_-]*"\), \("[[:alnum:]_-]*"\))}}/\2/g' $file + # Replace macros with more than two arguments + sed -i 's/{{[[:alnum:]_-]*(\("[[:alnum:]_-]*"\), \("[[:alnum:]_-]*"\), \("[[:alnum:]_-]*"\))}}/\2/g' $file + # Reduce markdown to plain text + - run: sudo apt install pandoc -y + - id: md2txt + name: Convert markdown to plain text + run: | + file=${{ needs.prepare-translation.outputs.translation }} + tmpHtmlFile=$(echo $file | sed 's/\.md/\.html/') + pandoc -f markdown -t html -o $tmpHtmlFile $file + newFileName=$(echo $file | sed 's/\.md/\.txt/') + pandoc -f html -t plain -o $newFileName $tmpHtmlFile + echo "translation=$newFileName" >> $GITHUB_OUTPUT + echo $newFileName + - if: steps.md2txt.outputs.translation == '' + name: Check translation is found + run: echo "No translation file found" && exit 1 + - uses: actions/setup-java@v3 + with: + distribution: "temurin" + java-version: "8" + - name: Download LanguageTool + run: wget -q https://languagetool.org/download/LanguageTool-6.3.zip + - name: Unzip LanguageTool + run: unzip -qq LanguageTool-6.3.zip + - name: Add spelling additions + run: | + cat uk_spelling_additions.txt >> ./LanguageTool-6.3/org/languagetool/resource/uk/hunspell/spelling.txt + cat uk_ignore_additions.txt >> ./LanguageTool-6.3/org/languagetool/resource/uk/hunspell/ignore.txt + - id: disabled-rules + name: Determine disabled rules + run: echo "disabled_rules=$(cat disabled_rules.txt | tr '\n' ',')" >> $GITHUB_OUTPUT + - id: check-spelling + name: Check spelling + run: | + cd LanguageTool-6.3 + java -jar languagetool-commandline.jar -d ${{steps.disabled-rules.outputs.disabled_rules}} -l uk --json ../${{ steps.md2txt.outputs.translation }} > ../result.json + cat ../result.json + matches=$(cat ../result.json | jq '.matches') + # Check if matches equal [] + echo "has_matches=$(if [ "$matches" == "[]" ]; then echo "false"; else echo "true"; fi)" >> $GITHUB_OUTPUT + - name: Upload result.json + uses: actions/upload-artifact@v3 + with: + name: result + path: result.json + - name: Upload text file + uses: actions/upload-artifact@v3 + with: + name: text + path: ${{ steps.md2txt.outputs.translation }} + report-spelling: + if: ${{ needs.languagetool.outputs.has_matches != 'false' }} + name: Report spelling + needs: [prepare-translation, languagetool] + permissions: + contents: read + pull-requests: write + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + - uses: actions/download-artifact@v3 + with: + name: result + path: . + - uses: actions/setup-node@v4 + with: + node-version: "16" + - uses: actions/download-artifact@v3 + with: + name: text + path: . + - name: Create mapping + run: node scripts/create-file-mapping.js ./index.txt ${{ needs.prepare-translation.outputs.translation }} > ./mapping.json && cat ./mapping.json + - env: + COMMIT_ID: ${{ github.event.pull_request.head.sha }} + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + PR_NUMBER: ${{ github.event.pull_request.number }} + name: Send results + run: node scripts/send-comments.js ${{ needs.prepare-translation.outputs.translation }} + timeout-minutes: 5 + - name: Exit with error + run: echo "Spelling errors found" && cat result.json && exit 1 diff --git a/CHANGELOG.md b/CHANGELOG.md index 6efa14057f..62ecbf2ef8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,197 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), +## [2023-11-10 - 2023-11-17] + +* **Оновлення перекладу(JS):** web/javascript/inheritance_and_the_prototype_chain (#2496) ([bd139d45](https://github.com/webdoky/content/commit/bd139d4560c0ab83a7d7f9a1b2c8f24ff7725679)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/parseint (#2493) ([470bad50](https://github.com/webdoky/content/commit/470bad5066f1263e64cbea2771a0ac7b5eef8e60)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/set (#2489) ([d0282b03](https://github.com/webdoky/content/commit/d0282b038dbd5bfc3099f5d780df8afd0205d9b2)) +* **Оновлення перекладу(CSS):** web/css/length (#2495) ([82fe163b](https://github.com/webdoky/content/commit/82fe163b6c0701a6ea35b0b1cf22454e6db60423)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/split (#2487) ([354af5d3](https://github.com/webdoky/content/commit/354af5d3e2dd945eca190a798591b67ec647ab5d)) +* **Переклад(HTML):** web/html/attributes/readonly (#1769) ([59f309d8](https://github.com/webdoky/content/commit/59f309d80654adfaa9b4cc44bc1c6ed11839e276)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/tosource (#2494) ([28d757cc](https://github.com/webdoky/content/commit/28d757ccdad1277e25b6a01461661b9435a6380e)) +* **Оновлення перекладу(JS):** web/javascript/reference/statements/switch (#2490) ([6e7e6fd4](https://github.com/webdoky/content/commit/6e7e6fd4227c3e58c2f936fe2f050954e8199df6)) +* **Оновлення перекладу(HTML):** web/html/element/input/checkbox (#2492) ([e05e01b8](https://github.com/webdoky/content/commit/e05e01b887bd88f56fd550d92a53c76f6e4c2afa)) +* **Оновлення перекладу(CSS):** web/css/align-items (#2491) ([d9291aac](https://github.com/webdoky/content/commit/d9291aac8c5ced69517c5dbadd9bbd1132be92a2)) +* **Оновлення перекладу(HTML):** web/html/element/link (#2488) ([84d2736f](https://github.com/webdoky/content/commit/84d2736f1f48eb0767ccb3d963e421417e3d71fd)) + +## [2023-11-03 - 2023-11-10] + +* **Переклад(JS):** web/javascript/reference/regular_expressions/character_class (#1809) ([86e4fd4d](https://github.com/webdoky/content/commit/86e4fd4d1d9bff60f80cb21bec59245bfc137547)) +* **Переклад(CSS):** web/css/_colon_blank (#2483) ([51bf67c1](https://github.com/webdoky/content/commit/51bf67c1f1c5f8344cdca811f2fed7e14de701ee)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/codepointat (#1889) ([15bd4027](https://github.com/webdoky/content/commit/15bd40274a122b5afeec1ce869b868e428d89567)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/map (#1849) ([890d3124](https://github.com/webdoky/content/commit/890d31242da8a255fd595bd584be2cc966327f3f)) +* **Виправлення(HTML):** fix live samples in web/html/element/meter (#2481) ([4cf6c1c7](https://github.com/webdoky/content/commit/4cf6c1c758dc786963e9dac3127b01d6da88d7ff)) +* **Виправлення(HTML):** filx live samples in web/html/element/input/range (#2480) ([be71b37c](https://github.com/webdoky/content/commit/be71b37caff62179368ab347a4fa522ad94bd233)) +* **Виправлення(HTML):** fix live samples in web/html/element/input/month (#2479) ([4115d87f](https://github.com/webdoky/content/commit/4115d87fcf6831e57e162b477b6978ff3cc75b3f)) +* **Виправлення(HTML):** fix live samples in web/html/element/input/color (#2478) ([f2dcabf1](https://github.com/webdoky/content/commit/f2dcabf1c43be727d150bce4d874edc10ce8c98a)) +* **Виправлення(HTML):** fix live samples in web/html/element/input/button (#2477) ([c195f5d5](https://github.com/webdoky/content/commit/c195f5d52af192e2ad0a0da52712d5a1a50595aa)) +* **Переклад(CSS):** web/css/font-synthesis-position ([b80800fa](https://github.com/webdoky/content/commit/b80800fa0324fbaa2bc76216dc91ec3732b172bc)) +* **Переклад(HTML):** web/html/element/object (#2464) ([55de0af4](https://github.com/webdoky/content/commit/55de0af4a430fc6c82e6e863f794fc0ecb5c4dd2)) +* **Переклад(CSS):** web/css/_colon_optional ([aed7fdd3](https://github.com/webdoky/content/commit/aed7fdd3ef76bd2b51bbbdf2c9822d3fc8e91e69)) +* **Переклад(glossary):** glossary/internationalization ([bc9f105b](https://github.com/webdoky/content/commit/bc9f105b82028ce4998af5db4bf8a584df2a85f6)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/object/keys ([c719f9a2](https://github.com/webdoky/content/commit/c719f9a2e963694157b407b8cfd814b4b62902c0)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/object/values ([20add854](https://github.com/webdoky/content/commit/20add854687293ad73e1e7dec8d35a527e81c2b2)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/object/entries ([1a038f12](https://github.com/webdoky/content/commit/1a038f12c2da40c77a40622d1a3d3f94d1660457)) +* **Переклад(CSS):** web/css/at-rule (#1768) ([01bc4cdf](https://github.com/webdoky/content/commit/01bc4cdf4dd3ddf75a1a524c2f1cb9f10a3b1653)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/array/join (#1845) ([5fb3e562](https://github.com/webdoky/content/commit/5fb3e5620272dd879bc96be8485d464574870f40)) +* **Переклад(JS):** web/javascript/reference/regular_expressions/character_class_escape (#1823) ([cd29586e](https://github.com/webdoky/content/commit/cd29586eaaf7561d9ee927e46a536bcc5d4ed5e0)) +* **Оновлення перекладу(JS):** web/javascript/reference/operators/optional_chaining (#2473) ([fdd55ef4](https://github.com/webdoky/content/commit/fdd55ef420952646040a5b48385b5d0ded5d39e4)) +* **Оновлення перекладу(JS):** web/javascript/reference/operators/delete (#2471) ([773f4bb5](https://github.com/webdoky/content/commit/773f4bb5070ab0abc3d8766ed63a4e8bcf25b32c)) +* **Оновлення перекладу(JS):** web/javascript/reference (#2470) ([bde42b1a](https://github.com/webdoky/content/commit/bde42b1a9bc782b666fea2adb375955d6b9e521e)) +* **Оновлення перекладу(JS):** web/javascript/reference/classes (#2468) ([c351d546](https://github.com/webdoky/content/commit/c351d54636a6d0ff5f23cea3b3f90ffdc7c7866b)) +* **Оновлення перекладу(JS):** web/javascript/reference/lexical_grammar (#2467) ([ade11fb8](https://github.com/webdoky/content/commit/ade11fb8323912e572e090bc6cad0d50b80e33d8)) +* **Оновлення перекладу(JS):** web/javascript/inheritance_and_the_prototype_chain (#2466) ([c61a87c8](https://github.com/webdoky/content/commit/c61a87c82ba5d8fce2c44b8a0106d5e807c6f40b)) +* **Оновлення перекладу(JS):** web/javascript/closures (#2465) ([280ad32e](https://github.com/webdoky/content/commit/280ad32ead7278da9d16fec382267721f41a60a2)) +* **Переклад(CSS):** web/css/_colon_placeholder-shown ([88a89f6e](https://github.com/webdoky/content/commit/88a89f6e315400ebd6757ddc9fcc0ce60df8f0b5)) +* **Переклад(SVG):** web/svg/attribute/decoding ([7c5c79d6](https://github.com/webdoky/content/commit/7c5c79d64eddfe127b2b5cd5265a0255d650f6d4)) +* **Переклад(CSS):** web/css/_colon_indeterminate ([9387b507](https://github.com/webdoky/content/commit/9387b5074c912c2f3d90fd146fe756d4d1097562)) +* **Переклад(guide):** web/guide (#2363) ([f69dd096](https://github.com/webdoky/content/commit/f69dd096f44750fac1bdf5876d6186bce5e4d672)) +* **Переклад(glossary):** glossary/base64 (#2365) ([e1037332](https://github.com/webdoky/content/commit/e10373323b614c88c3cd6099c26eea7816be39ae)) +* **Переклад(CSS):** web/css/flex-grow (#2366) ([78b290ab](https://github.com/webdoky/content/commit/78b290abebf02e08b1066f343ace86a62007e7e3)) +* **Переклад(CSS):** web/css/@media (#2369) ([9a609767](https://github.com/webdoky/content/commit/9a609767d10f12930fc733c7d10a19bca06990c3)) +* **Переклад(CSS):** web/css/css_media_queries (#2373) ([12e151d6](https://github.com/webdoky/content/commit/12e151d6e14baf82fb8b5cee75c424dc45a6521d)) +* **Переклад(CSS):** web/css/transform-function (#2377) ([a680970f](https://github.com/webdoky/content/commit/a680970fd9c54b56ee8a1900b30b201345ee9709)) +* **Оновлення перекладу(JS):** web/javascript/guide/modules ([940a33de](https://github.com/webdoky/content/commit/940a33de144a64d124620440764ed9c27bceafee)) +* **Переклад(CSS):** web/css/_colon_in-range ([b1730315](https://github.com/webdoky/content/commit/b1730315a40ddf35bd56f1570ce0e0acb4e9e476)) +* **Переклад(glossary):** glossary/snake_case ([8f45ca89](https://github.com/webdoky/content/commit/8f45ca893630b53b141d0b749c57e77662b524b2)) +* **Переклад(HTML):** web/html/element/i ([26aee66a](https://github.com/webdoky/content/commit/26aee66a8bceab713e20afd221c70cc5fb5e34da)) +* **Переклад(glossary):** glossary/baseline (#2458) ([7f4fe2f3](https://github.com/webdoky/content/commit/7f4fe2f3b6117b4a03814cf5fe5f8d892163bcf2)) +* **Переклад(CSS):** web/css/css_backgrounds_and_borders ([47dbb2b9](https://github.com/webdoky/content/commit/47dbb2b917f50a36dd4ae83f4fe8d698ab923890)) +* **Переклад(CSS):** web/css/css_animations ([28a1a2c3](https://github.com/webdoky/content/commit/28a1a2c363b5281f91419a863393e604b748e8ed)) +* **Переклад(CSS):** web/css/css_box_model ([76ff46e1](https://github.com/webdoky/content/commit/76ff46e126a61899aa20f488326e0fb9acf7c33e)) +* **Переклад(CSS):** web/css/css_text ([371451a9](https://github.com/webdoky/content/commit/371451a90e26e089f500888e5b4ae2d07d0420a6)) +* **Переклад(CSS):** web/css/css_transitions ([9b523a27](https://github.com/webdoky/content/commit/9b523a27d39ff96b89352e797036825d550b4073)) +* **Переклад(CSS):** web/css/gradient ([74ec654e](https://github.com/webdoky/content/commit/74ec654e42c777304ecdc91958e6b2330059dbfe)) +* **Переклад(HTML):** web/html/attributes ([f79be797](https://github.com/webdoky/content/commit/f79be797d152b4a919f27129efd7d5813492f0c6)) +* **Оновлення перекладу(CSS):** web/css/css_text/wrapping_breaking_text ([f14a19a0](https://github.com/webdoky/content/commit/f14a19a0058878360ccdb148daa1ca708eb13d6b)) +* **Оновлення перекладу(CSS):** web/css/width ([eaae373a](https://github.com/webdoky/content/commit/eaae373a3c98d6dcaa7cccc42952937819db40fa)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/slice (#2462) ([b675c6dd](https://github.com/webdoky/content/commit/b675c6ddd4a11fec965d53394eeb5d34e13cad07)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/indexof (#2461) ([789a114c](https://github.com/webdoky/content/commit/789a114c387ebd855a49610c6305e71d7a634fe9)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/json/stringify (#2460) ([da9e88bc](https://github.com/webdoky/content/commit/da9e88bc8c4f46b8f545dc3bfbc32e6e137fa0cd)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/date/tolocaledatestring (#2459) ([fa80e512](https://github.com/webdoky/content/commit/fa80e512528f2d7af6486f30591f4ac85833c503)) + +## [2023-10-27 - 2023-11-03] + +* **Переклад(glossary):** glossary/baseline/compatibility (#1750) ([b7b006d5](https://github.com/webdoky/content/commit/b7b006d5183498686e090155cda121314207a027)) +* **Оновлення перекладу(HTML):** web/html/element/iframe (#2453) ([2f968df6](https://github.com/webdoky/content/commit/2f968df6387b8cd017b6ab2ae13aee490cae0f80)) +* **Оновлення перекладу(HTML):** web/html/viewport_meta_tag (#2457) ([58cdb728](https://github.com/webdoky/content/commit/58cdb728d2149d52c54437d1757189e3ff8f9591)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/array/every (#2454) ([a462e6e4](https://github.com/webdoky/content/commit/a462e6e4c7368cf8fc73af28f83b7661cc7dd5ca)) +* **Переклад(JS):** web/javascript/reference/regular_expressions/capturing_group (#1783) ([7b3178ad](https://github.com/webdoky/content/commit/7b3178aded732a1efc113b9552444db345624e64)) +* **Переклад(HTML):** web/html/element/audio (#1739) ([a084f8d0](https://github.com/webdoky/content/commit/a084f8d0fec6791af494bdca82f6424ac56d8854)) +* **Переклад(JS):** web/javascript/reference/operators/logical_and (#2368) ([23e0b0cc](https://github.com/webdoky/content/commit/23e0b0cc1c245a7ae7b60a8420b16657cdbf1db0)) +* **Переклад(JS):** web/javascript/reference/functions (#2380) ([52f4d248](https://github.com/webdoky/content/commit/52f4d248aa48a46678ddfbc1f9438c2ecdfe6023)) +* **Переклад(HTML):** web/html/element/script/type/speculationrules (#2398) ([ce1760dd](https://github.com/webdoky/content/commit/ce1760ddadf3ef9cf3f1c53ad653ce808161c065)) +* **Переклад(HTML):** web/html/element/script/type (#2399) ([c41d888e](https://github.com/webdoky/content/commit/c41d888e7c57dea8d3c50caa73a34c470011adc6)) +* **Переклад(JS):** web/javascript/reference/errors ([694e403b](https://github.com/webdoky/content/commit/694e403bd16f8aea48b65dcdc9b61debcf9a9152)) +* **Переклад(CSS):** web/css/_colon_out-of-range ([5ab05633](https://github.com/webdoky/content/commit/5ab0563398ce7985e524d5ae774ead4565249670)) +* **Переклад(CSS):** web/css/font ([cdfec567](https://github.com/webdoky/content/commit/cdfec5670b687f07ae5969ecd01e3b49074db037)) +* **Переклад(JS):** web/javascript/reference/regular_expressions/backreference (#1775) ([cdbded0b](https://github.com/webdoky/content/commit/cdbded0b72bea74fb1a3fee0f506269bc54e3345)) +* **Переклад(CSS):** web/css/_colon_required (#2444) ([e3e9c6de](https://github.com/webdoky/content/commit/e3e9c6dea851b8136dccd489eb840b9835fc6dcd)) +* **Оновлення перекладу(JS):** web/javascript/reference/operators/this (#2420) ([2c0e1db7](https://github.com/webdoky/content/commit/2c0e1db78fecbed7512259813c4c6556cc45e3e3)) +* **Оновлення перекладу(HTML):** web/html/element/input/file (#2452) ([e8af3a4f](https://github.com/webdoky/content/commit/e8af3a4fb3aed0b58434c01fa51cc607b3384a06)) +* **Оновлення перекладу(CSS):** web/css/height (#2451) ([7b473e8c](https://github.com/webdoky/content/commit/7b473e8c1e5e79e0ef2ea195209d2e9d2fd8b00d)) +* **Оновлення перекладу(glossary):** glossary/repaint (#2450) ([6e959e5c](https://github.com/webdoky/content/commit/6e959e5cfa81633b7aabea1ad8308cf2e72fbf5b)) + +## [2023-10-20 - 2023-10-27] + +* **Оновлення перекладу(CSS):** web/css/position (#2446) ([9d4b78a5](https://github.com/webdoky/content/commit/9d4b78a56abfd73ba0afcdc1edc753a1d11d9c80)) +* **Оновлення перекладу(JS):** web/javascript/reference/operators/new (#2448) ([670dd95d](https://github.com/webdoky/content/commit/670dd95dea88f5c9e890f1d2deda5127315b49c9)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/promise (#2447) ([02c54671](https://github.com/webdoky/content/commit/02c54671379e2fe7c497d6bf44657e9adc9b1550)) +* **Оновлення перекладу(glossary):** glossary/render_blocking (#2445) ([dcf20725](https://github.com/webdoky/content/commit/dcf20725e45dbe4ee63e29e2e93f5cdb3d4d26aa)) +* **Переклад(glossary):** glossary/json_type_representation ([795a3f7b](https://github.com/webdoky/content/commit/795a3f7b0bd51b3c202354834333579238605ac9)) +* **Переклад(CSS):** web/css/flex-basis ([980ed3d8](https://github.com/webdoky/content/commit/980ed3d84c34968df0077bc6af315d2cdd1fede1)) +* **Оновлення перекладу(JS):** web/javascript/reference/statements/if...else ([d0dbf4d6](https://github.com/webdoky/content/commit/d0dbf4d61ccb47929542705b320420ede576a6a9)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/big ([8ae1dcf3](https://github.com/webdoky/content/commit/8ae1dcf39eb019105722bb21674b5f8038bce4dd)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/bold ([ce78a710](https://github.com/webdoky/content/commit/ce78a71007ccd8806de081cf37a15ab36a99e097)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/fixed ([02cb1592](https://github.com/webdoky/content/commit/02cb1592ed9c305a08151e2e1f942219930967c4)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/fontsize ([08d1ec75](https://github.com/webdoky/content/commit/08d1ec75f0a5d117b5cf7628e279dbcb00d2ffc6)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/fontcolor ([377e10e9](https://github.com/webdoky/content/commit/377e10e9e2fb3c4ba2877baf436c38d3a76f72b7)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/italics ([09bd9688](https://github.com/webdoky/content/commit/09bd96880c79a738332a0fd1527f61a91915602d)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/link ([6c6751fc](https://github.com/webdoky/content/commit/6c6751fc4ac224e3a78a8e9d2ccda6ae2c41bf49)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/intl ([28ce367f](https://github.com/webdoky/content/commit/28ce367f7c93264719bf2f84456b2e0f9e4874b6)) +* **Оновлення перекладу(glossary):** glossary/truthy (#2443) ([bca4be45](https://github.com/webdoky/content/commit/bca4be45179b9a22860f63ac831e10765a28e5fe)) +* **Оновлення перекладу(JS):** web/javascript/reference/operators/nullish_coalescing (#2442) ([3f067a25](https://github.com/webdoky/content/commit/3f067a258fa907c54d27ab71f953b308883d8e90)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/proxy (#2440) ([6a8b6431](https://github.com/webdoky/content/commit/6a8b64318f397c2d044a4ecab25bb1b3ddc3c74f)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/substr (#2439) ([61c1a632](https://github.com/webdoky/content/commit/61c1a63255e367a28b01de329e9df8b0badb098e)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/lastindexof (#2437) ([1734c939](https://github.com/webdoky/content/commit/1734c9395d30d2b1eeaa13ffaaa75527b2de2645)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/@@iterator (#2430) ([4b0d3cb8](https://github.com/webdoky/content/commit/4b0d3cb8807077a828eafb5320d8b035f258f909)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/object/valueof (#2429) ([fa2ccea4](https://github.com/webdoky/content/commit/fa2ccea4e79ce724726fd23912a1470fea71fefd)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/object/getownpropertynames (#2428) ([7c49b42b](https://github.com/webdoky/content/commit/7c49b42b92f057059f8b9b461e7b728b70f6cc33)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/math/log2e (#2427) ([a0ee340e](https://github.com/webdoky/content/commit/a0ee340e25023358f766d550146a877081cc05ba)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/math/ln2 (#2426) ([e38e02fc](https://github.com/webdoky/content/commit/e38e02fcde4604fed003d33ddd3f28ea90d1c173)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/math/ln10 (#2425) ([472118f1](https://github.com/webdoky/content/commit/472118f1730674d7d04bd8f02ce5489dd468e6f3)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/array/unshift (#2424) ([2d79cdf0](https://github.com/webdoky/content/commit/2d79cdf0b0eea924c5e5efe812884f7563326c0d)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/array/pop (#2423) ([0c77a3fa](https://github.com/webdoky/content/commit/0c77a3faea91ae5d519c1dc2de1d24d302c287d7)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/array/length (#2422) ([db17e420](https://github.com/webdoky/content/commit/db17e42036af727a356bd7edc467212a4c82ccf8)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/array/isarray (#2421) ([b771dab7](https://github.com/webdoky/content/commit/b771dab7ef0e40f37b5fbfc8845244e6700608f8)) +* **Оновлення перекладу(JS):** web/javascript/reference/operators/property_accessors (#2419) ([7a767c11](https://github.com/webdoky/content/commit/7a767c11d702ae7ad0fcb842b9dc2faf692afa9f)) +* **Оновлення перекладу(JS):** web/javascript/reference/operators/object_initializer (#2418) ([8033d621](https://github.com/webdoky/content/commit/8033d62134f81c84b7e5ebb7aed11aedf79d8d96)) +* **Оновлення перекладу(JS):** web/javascript/reference/statements/const (#2416) ([b7b2907a](https://github.com/webdoky/content/commit/b7b2907a6497c257b29991976f2e81c1023e5dbd)) +* **Оновлення перекладу(JS):** web/javascript/reference/statements (#2415) ([5e3cc773](https://github.com/webdoky/content/commit/5e3cc773bdede819336924359c81d6f3c6bb309a)) +* **Оновлення перекладу(JS):** web/javascript/language_overview (#2414) ([1cdfbe29](https://github.com/webdoky/content/commit/1cdfbe29d1f1a7824de076aa2c231e34b56cecac)) +* **Оновлення перекладу(JS):** web/javascript/enumerability_and_ownership_of_properties (#2413) ([6a32c4f4](https://github.com/webdoky/content/commit/6a32c4f45baf118aa5598f1f28cb236a532d8504)) +* **Оновлення перекладу(HTML):** web/html/element/input/url (#2412) ([b4c045c4](https://github.com/webdoky/content/commit/b4c045c4f55cc78f4f792168be6f0c799e7d36cf)) +* **Оновлення перекладу(HTML):** web/html/element/input/text (#2411) ([9ae07cf2](https://github.com/webdoky/content/commit/9ae07cf2bafc6821f39c8d1ba82d5420b075e359)) +* **Оновлення перекладу(HTML):** web/html/element/input/tel (#2410) ([9398cfe3](https://github.com/webdoky/content/commit/9398cfe34d4dad1e28089a595348ed789ceddcaf)) +* **Оновлення перекладу(HTML):** web/html/element/input/submit (#2409) ([404b7ac6](https://github.com/webdoky/content/commit/404b7ac64333490aeadcffca7886f5024aba817c)) +* **Оновлення перекладу(HTML):** web/html/element/input/password (#2408) ([eacd97d1](https://github.com/webdoky/content/commit/eacd97d1abdfe54a4b573a51ba5e87d4fe448c52)) +* **Оновлення перекладу(HTML):** web/html/element/input/number (#2407) ([fa897d4f](https://github.com/webdoky/content/commit/fa897d4fa446741c6cc4298c586d22d54fe17d40)) +* **Оновлення перекладу(CSS):** web/css/css_backgrounds_and_borders/resizing_background_images (#2406) ([4dddf28e](https://github.com/webdoky/content/commit/4dddf28ea74eccb76d92effb5f2ca8aab3c89a51)) +* **Оновлення перекладу(CSS):** web/css/_colon_invalid (#2405) ([055c9dc4](https://github.com/webdoky/content/commit/055c9dc4050bc12670f35d3a0cc5abe83f6c8cd7)) +* **Оновлення перекладу(CSS):** web/css/--_star_ (#2404) ([a8137495](https://github.com/webdoky/content/commit/a8137495cf47dba2e3948cc4a68b007818a70ee1)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/math/tan (#1805) ([e40e53b0](https://github.com/webdoky/content/commit/e40e53b0983884a4f9709a1ac6334f73df603266)) + +## [2023-10-13 - 2023-10-20] + +* **Оновлення перекладу(JS):** web/javascript/reference/statements/let (#2015) ([8a3e24da](https://github.com/webdoky/content/commit/8a3e24dab1e3f2fca052f19d156c651544cb4b44)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/regexp/lastindex (#2017) ([ac1ac4ce](https://github.com/webdoky/content/commit/ac1ac4ce0cffa6a159fe2cf18797bbae602bf7f5)) +* **Оновлення перекладу(CSS):** web/css/width (#2107) ([c9d0fcbc](https://github.com/webdoky/content/commit/c9d0fcbc2bd0a4c6896e60ff18a01f19f04f7211)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/search (#2167) ([1d26524b](https://github.com/webdoky/content/commit/1d26524bb8475b9b88698c96152669658c017a17)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/small (#2168) ([89623bcf](https://github.com/webdoky/content/commit/89623bcf4a39b4b1b16ecf8b4a639615831d5d32)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/string (#2170) ([fd6abc82](https://github.com/webdoky/content/commit/fd6abc829d5c42468be03d0e65c8e84bd4178d51)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/sub (#2171) ([0d88dc22](https://github.com/webdoky/content/commit/0d88dc222f8ed6004ce3d012a2dc840f7847ead8)) +* **Переклад(JS):** web/javascript/reference/global_objects/intl (#2381) ([20c1ebb2](https://github.com/webdoky/content/commit/20c1ebb2f1edf213093d2bb317e33f063ccaec9c)) +* **Переклад(JS):** web/javascript/reference/global_objects/json (#2382) ([740961e6](https://github.com/webdoky/content/commit/740961e66e20ec60b095471902e6a8c3ca481e3b)) +* **Оновлення перекладу(CSS):** web/css/align-items ([28853c14](https://github.com/webdoky/content/commit/28853c14cab3ad5ddd2d7cbb87393ce3d03e3ce5)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/blink (#2131) ([d64ae02f](https://github.com/webdoky/content/commit/d64ae02fe1baf9e2f45b4dbdbb5685f749a7040e)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/strike (#2169) ([bc08c75b](https://github.com/webdoky/content/commit/bc08c75b2f4962f83ff72afa45d2dcdbe83b034f)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/array/findindex (#2118) ([be801cd3](https://github.com/webdoky/content/commit/be801cd30a8c250c299387ea89859d24e5fa15b5)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/math/expm1 (#2142) ([c7b0ea8c](https://github.com/webdoky/content/commit/c7b0ea8c049bf8fee5b2aede65b6f3a42b526a1e)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/sup (#2172) ([8ad3e7e3](https://github.com/webdoky/content/commit/8ad3e7e32078003cdb69953418f8f880a6b9e277)) +* **Переклад(glossary):** glossary/kebab_case (#2353) ([ccc4a65b](https://github.com/webdoky/content/commit/ccc4a65baa677e910420555d4ca508677b50158b)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/tolocalelowercase (#2173) ([69373b80](https://github.com/webdoky/content/commit/69373b80500da73279c18d8746026e7834101b25)) +* **Оновлення перекладу(CSS):** web/css/@media/prefers-reduced-transparency (#1950) ([54c6dbc8](https://github.com/webdoky/content/commit/54c6dbc8cc732f8df15e439bdaea28b392f16098)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/array/concat (#2396) ([862396d1](https://github.com/webdoky/content/commit/862396d1accb5c5237426e29c87b3e23bd0114b2)) +* **Оновлення перекладу(HTML):** web/html/element/img ([ea675a77](https://github.com/webdoky/content/commit/ea675a77fc57a58e2c8b9063bf32797a02ca9157)) +* **Оновлення перекладу(JS):** web/javascript/guide/grammar_and_types (#2395) ([04c71766](https://github.com/webdoky/content/commit/04c71766e370628e6dadb009c14d620d567c04c3)) +* **Оновлення перекладу(HTML):** web/html/element/script ([4e955e5b](https://github.com/webdoky/content/commit/4e955e5bc5b84e5913874a3f9e4d67a071c58465)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/number (#2393) ([4867e9e1](https://github.com/webdoky/content/commit/4867e9e1c0844a39a6acb15394fd04967419643e)) +* **Оновлення перекладу(HTML):** web/html/element/form (#2392) ([087b7d55](https://github.com/webdoky/content/commit/087b7d5530c060354a11fcf54c9d722b869f11df)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/set (#2389) ([a3e2d2b9](https://github.com/webdoky/content/commit/a3e2d2b97e266d5eeb04243a8f79d36f5c1ee70a)) +* **Оновлення перекладу(HTML):** web/html/element/div (#2390) ([980b145a](https://github.com/webdoky/content/commit/980b145a04b947507b6335df8fe9862e2e5da782)) +* **Оновлення перекладу(CSS):** web/css/text-overflow (#2388) ([6c4720ac](https://github.com/webdoky/content/commit/6c4720ac1cf971c32e7401a8df52e20afa175634)) +* **Оновлення перекладу(HTML):** web/html/element/p (#2387) ([1a6553ee](https://github.com/webdoky/content/commit/1a6553ee9bf3a3e355dac53e27176085aa6c97a1)) +* **Оновлення перекладу(CSS):** web/css/backdrop-filter (#2386) ([f9d4000b](https://github.com/webdoky/content/commit/f9d4000b7e8e2ef96759a87e5d9ee77277903bc6)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/promise (#2384) ([faf12bfa](https://github.com/webdoky/content/commit/faf12bfaa444d34bb11b17d22653876e99a0e7ff)) +* **Оновлення перекладу(HTML):** web/html/element/a (#2383) ([49017178](https://github.com/webdoky/content/commit/490171786a89405d80613364e6aafa62b5f36585)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/string/anchor (#2130) ([d5fc725b](https://github.com/webdoky/content/commit/d5fc725b11d17a8bbcbeb800e6b27ad2b184f5cd)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/array/reverse (#1888) ([d45e05a2](https://github.com/webdoky/content/commit/d45e05a2abb9190ea11648cec59a435d5b7f3ca9)) +* **Оновлення перекладу(JS):** web/javascript/reference/global_objects/math/atan2 (#1764) ([c8e6ffea](https://github.com/webdoky/content/commit/c8e6ffeab24ef85f5a170284b343f7ef9b685d2a)) +* **Оновлення перекладу(JS):** web/javascript/reference/statements/async_function (#2014) ([f808160e](https://github.com/webdoky/content/commit/f808160e9e81c555734d09ff528241ed85459f82)) +* **Переклад(HTML):** web/html/element/meter (#1855) ([1866984c](https://github.com/webdoky/content/commit/1866984c48b13a8c4d35ae096fb25631fbb4f791)) +* **Переклад(CSS):** web/css/_colon_valid (#2352) ([6b394005](https://github.com/webdoky/content/commit/6b3940055fc38c49f30f676697e3bd75e79c5417)) + +## [2023-10-06 - 2023-10-13] + +* **Оновлення перекладу(HTML):** web/html/element/input/search (#2361) ([db66d892](https://github.com/webdoky/content/commit/db66d8928d7a9ab28af6a5a91d052e46af5be114)) +* **Оновлення перекладу(HTML):** web/html/element/input/email (#2360) ([fa2dc77c](https://github.com/webdoky/content/commit/fa2dc77c217006f3cc4e4894bfca6bc9fa3c164c)) +* **Оновлення перекладу(HTML):** web/html/element/script (#2359) ([eba11555](https://github.com/webdoky/content/commit/eba11555bde09def97a741fe071d4ff4a8074f8e)) +* **Оновлення перекладу(JS):** web/javascript/guide/using_promises (#2358) ([a40b978a](https://github.com/webdoky/content/commit/a40b978aa7478f3f07543a95b2f45269d8bdf61d)) +* **Оновлення перекладу(HTML):** web/html/element/link (#2356) ([b7291581](https://github.com/webdoky/content/commit/b729158133a46efe324c9048d59bd344c4da1691)) +* **Оновлення перекладу(JS):** web/javascript/closures (#2350) ([b24f1801](https://github.com/webdoky/content/commit/b24f1801e00937487561ed3726fdea4ee73efa98)) +* **Оновлення перекладу(HTML):** web/html/element/input (#2339) ([04116786](https://github.com/webdoky/content/commit/04116786da84b5e307f6ea9bb5a7e814a46d4e67)) + ## [2023-09-29 - 2023-10-06] * **Переклад(JS):** web/javascript/reference/regular_expressions (#1738) ([4f4e3ea1](https://github.com/webdoky/content/commit/4f4e3ea13376d8ebf4ecb50e47de8d68992e9d64)) diff --git a/files/jsondata/L10n-Common.json b/files/jsondata/L10n-Common.json new file mode 100644 index 0000000000..ceb41a6769 --- /dev/null +++ b/files/jsondata/L10n-Common.json @@ -0,0 +1,71 @@ +{ + "Constructor": { + "uk": "Конструктор" + }, + "Event_handlers": { + "uk": "Обробники подій" + }, + "Events": { + "uk": "Події" + }, + "Guides": { + "uk": "Посібники" + }, + "Implemented_by": { + "uk": "Виконується:" + }, + "Inheritance": { + "uk": "Успадкування" + }, + "Instance_methods": { + "uk": "Методи примірників" + }, + "Instance_properties": { + "uk": "Властивості примірників" + }, + "Interfaces": { + "uk": "Інтерфейси" + }, + "Methods": { + "uk": "Методи" + }, + "MissingPage": { + "uk": "[Цієї сторінки ще немає]" + }, + "Properties": { + "uk": "Властивості" + }, + "Reference": { + "uk": "Довідник" + }, + "Related_pages": { + "uk": "Сторінки, споріднені з $1" + }, + "Related_pages_wo_group": { + "uk": "Споріднені сторінки:" + }, + "Static_methods": { + "uk": "Статичні методи" + }, + "Static_properties": { + "uk": "Статичні властивості" + }, + "TranslationCTA": { + "uk": "Наша команда ще не переклала цю статтю українською. Приєднуйтесь і допоможіть нам зробити це!" + }, + "[Translate]": { + "uk": "Перекласти" + }, + "Tutorial": { + "uk": "Підручник" + }, + "listSeparator": { + "uk": ", " + }, + "section": { + "uk": "розділ" + }, + "summary": { + "uk": "Документація про це ще не написана; будь ласка, посприяйте її появі!" + } +} diff --git a/files/uk/glossary/base64/index.md b/files/uk/glossary/base64/index.md new file mode 100644 index 0000000000..fdad1daa1b --- /dev/null +++ b/files/uk/glossary/base64/index.md @@ -0,0 +1,89 @@ +--- +title: Base64 +slug: Glossary/Base64 +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Base64** (за основою 64) – це група споріднених кодувань [перетворення з двійкової у текстову форму](https://en.wikipedia.org/wiki/Binary-to-text_encoding), що представляють двійкові дані у вигляді рядка {{glossary("ASCII")}} за допомогою перекладу їх у представлення з системою числення 64. Термін _Base64_ походить від конкретного [кодування передачі вмісту MIME](https://en.wikipedia.org/wiki/MIME#Content-Transfer-Encoding). + +Коли термін "Base64" вживається сам по собі на позначення певного алгоритму, він зазвичай означає версію Base64, описану у [RFC 4648](https://datatracker.ietf.org/doc/html/rfc4648), розділі 4, яка використовує наступний алфавіт для представлення розрядних цифр системи числення 64, разом із `=` як символом відступу: + +```plain +ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/ +``` + +Поширена варіація – "безпечний для URL Base64", котрий пропускає відступ і замінює `+/` на `-_`, щоб уникнути символів, які можуть створювати проблеми у сегментах шляху URL і параметрах запиту. + +Схеми кодування Base64 заведено використовувати для кодування двійкових даних для зберігання чи передачі засобами, що можуть працювати лише з текстом ASCII (або певною надмножиною ASCII, що все одно не здатна приймати довільні двійкові дані). Це забезпечує, що дані залишаються незмінними під час транспортування. Поширені застосування Base64: + +- Електронна пошта через [MIME](https://uk.wikipedia.org/wiki/MIME) +- Зберігання складних даних у [XML](/uk/docs/Web/XML) +- Кодування двійкових даних, щоб їх можна було включити в [URL-адресу `data:`](/uk/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) + +## Збільшення розміру при кодуванні + +Кожна цифра Base64 представляє 6 біт даних. Отже, три 8-бітові байти вихідного рядка чи двійкового файлу (3×8 біт = 24 біти) можна представити чотирма 6-бітовими цифрами Base64 (4×6 = 24 біти). + +Це означає, що версія рядка чи файлу в Base64 зазвичай приблизно на третину більша за вихідні дані (точний приріст розміру залежить від різних факторів, таких як абсолютна довжина рядка, остача від ділення його довжини на 3 та те, чи використовуються символи відступу). + +## Підтримка в JavaScript + +Для розкодування та кодування рядків Base64 браузери надають дві функції JavaScript: + +- [`btoa`](/uk/docs/Web/API/btoa) – створює рядок ASCII, закодований Base64, з рядка двійкових даних ("btoa" слід читати як "binary to ASCII", "двійкове в ASCII"). +- [`atob`](/uk/docs/Web/API/atob) – розкодовує рядок, закодований Base64 ("atob" слід читати як "ASCII to binary", "ASCII у двійкове"). + +> **Примітка:** Base64 – це двійкове кодування, а не текстове, але `btoa` та `atob` були додані до вебплатформи до того, як вона почала підтримувати двійкові типи даних. В результаті ці дві функції використовують рядки для представлення двійкових даних, при чому кодова точка кожного символу представляє значення кожного байта. Це призвело до поширеного неправильного розуміння, ніби `btoa` можна використовувати для кодування довільних текстових даних – наприклад, створення Base64 `data:` URL текстового чи HTML-документа. +> +> Проте відповідність між байтами та кодовими точками надійно виконується лише для кодових точок до `0x7f`. Крім того, кодові точки понад `0xff` призведуть до викидання помилки `btoa`, через перевищення максимального значення для 1 байта. Наступний розділ детально описує, як обійти це обмеження при кодуванні довільного тексту Unicode. + +## "Проблема Unicode" + +Оскільки `btoa` тлумачить кодові точки вихідного рядка як значення байтів, виклик `btoa` для рядка призведе до викидання помилки "Character Out Of Range" ("символ поза допустимим діапазоном"), якщо кодова точка символу перевищує `0xff`. Для випадків використання, де потрібно закодувати довільний текст Unicode, необхідно спочатку перетворити рядок на його складові байти в UTF-8, а потім закодувати ці байти. + +Найпростіше рішення – використати `TextEncoder` і `TextDecoder` для перетворення між UTF-8 та однобайтовими представленнями рядка: + +```js +function base64ToBytes(base64) { + const binString = atob(base64); + return Uint8Array.from(binString, (m) => m.codePointAt(0)); +} + +function bytesToBase64(bytes) { + const binString = String.fromCodePoint(...bytes); + return btoa(binString); +} + +// Usage +bytesToBase64(new TextEncoder().encode("a Ā 𐀀 文 🦄")); // "YSDEgCDwkICAIOaWhyDwn6aE" +new TextDecoder().decode(base64ToBytes("YSDEgCDwkICAIOaWhyDwn6aE")); // "a Ā 𐀀 文 🦄" +``` + +## Перетворення довільних двійкових даних + +Функції `bytesToBase64` та `base64ToBytes` з попереднього розділу можна використовувати безпосередньо для перетворення між рядками Base64 і [`Uint8Array`](/uk/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array). + +Інший варіант: асинхронне перетворення між URL з даними Base64 можливе безпосередньо у вебплатформі за допомогою API [`FileReader`](/uk/docs/Web/API/FileReader) і [`fetch`](/uk/docs/Web/API/Fetch_API): + +```js +async function bytesToBase64DataUrl(bytes, type = "application/octet-stream") { + return await new Promise((resolve, reject) => { + const reader = Object.assign(new FileReader(), { + onload: () => resolve(reader.result), + onerror: () => reject(reader.error), + }); + reader.readAsDataURL(new File([bytes], "", { type })); + }); +} + +async function dataUrlToBytes(dataUrl) { + const res = await fetch(dataUrl); + return new Uint8Array(await res.arrayBuffer()); +} + +// Використання +await bytesToBase64DataUrl(new Uint8Array([0, 1, 2])); // "data:application/octet-stream;base64,AAEC" +await dataUrlToBytes("data:application/octet-stream;base64,AAEC"); // Uint8Array [0, 1, 2] +``` diff --git a/files/uk/glossary/baseline/compatibility/index.md b/files/uk/glossary/baseline/compatibility/index.md new file mode 100644 index 0000000000..76b0ce82a7 --- /dev/null +++ b/files/uk/glossary/baseline/compatibility/index.md @@ -0,0 +1,40 @@ +--- +title: База (сумісність) +slug: Glossary/Baseline/Compatibility +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**База** позначає можливості платформи Вебу, що мають широку підтримку. +Веброзробники можуть розраховувати на те, що базові можливості працюватимуть в сучасних браузерах. + +Про базові можливості, як API, так і набори властивостей CSS, так і записи JavaScript, відомо, що вони одноманітно працюють щонайменше в одній версії перед поточною декількох загальновідомих браузерів (Chrome, Edge, Firefox і Safari). + +## Картки + + + +🟢 Якщо ви бачите зелену картку Бази, то можете покладатися на те, що можливість буде працювати в останній і попередній мажорних випусках браузерів. + + + +🟡 Якщо ви бачите жовту картку, яка показує, що можливість ще не належить до Бази, то проведіть більше досліджень і тестувань з користувачами вашого сайту, перш ніж покладатися на цю можливість, або зачекайте, допоки вона не стане базовою. + +## Додаткові міркування + +База – це посібник-підсумок для підтримки, вона не охоплює кожну ситуацію. +Якщо ваш сайт повинен працювати з довгостроковим випуском браузера, старішим пристроєм або випуском браузера, який не входить до звіту Бази, то вам може знадобитися власне дослідження або тестування. +Якщо База не охоплює вашу ситуацію, то розгляньте можливість прочитати таблиці сумісності браузерів на WebDoky або відвідати [caniuse.com](https://caniuse.com/), перш ніж покладатися на використання можливості. + +## Як долучитися? + +База – це спільна робота спільноти W3C WebDX Community Group, вона ґрунтується на відкритих даних про сумісність браузерів від MDN. +Якщо ви маєте питання, відгук, або хочете допомогти оновити та розширити можливості, що охоплюються звітами про стан Бази, то перейдіть до [web-platform-dx/feature-set](https://github.com/web-platform-dx/feature-set) і візьміть участь. + +## Дивіться також + +- [Кросбраузерне тестування](/uk/docs/Learn/Tools_and_testing/Cross_browser_testing) +- [Репозиторій web-platform-dx/feature-set](https://github.com/web-platform-dx/feature-set) +- [Група спільноти WebDX W3C](https://www.w3.org/community/webdx/) +- [Репозиторій mdn/browser-compat-data](https://github.com/mdn/browser-compat-data) diff --git a/files/uk/glossary/baseline/index.md b/files/uk/glossary/baseline/index.md new file mode 100644 index 0000000000..6b0c2295c2 --- /dev/null +++ b/files/uk/glossary/baseline/index.md @@ -0,0 +1,15 @@ +--- +title: База (базова лінія) +slug: Glossary/Baseline +page-type: glossary-disambiguation +--- + +{{GlossarySidebar}} + +Термін **базова лінія**, або **база**, може мати кілька значень, залежно від контексту. Він може означати: + +{{GlossaryDisambiguation}} + +## Дивіться також + +- [Baseline](https://en.wikipedia.org/wiki/Baseline) на Wikipedia diff --git a/files/uk/glossary/internationalization/index.md b/files/uk/glossary/internationalization/index.md new file mode 100644 index 0000000000..a6f376cd56 --- /dev/null +++ b/files/uk/glossary/internationalization/index.md @@ -0,0 +1,27 @@ +--- +title: Інтернаціоналізація (i18n) +slug: Glossary/Internationalization +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Інтернаціоналізація**, також відома як "i18n", – це практика розробки системи в такий спосіб, щоб її можна було легко адаптувати для різних цільових аудиторій, що можуть відрізнятися за регіоном, мовою чи культурою. + +Процес доповнення системи з метою адаптації для конкретної цільової аудиторії називається {{glossary("Localization", "локалізацією")}}. + +Інтернаціоналізація, серед іншого, охоплює адаптацію до таких відмінностей: + +- системи письма +- одиниці вимірювання (валюта, градуси Цельсія чи Фаренгейта, кілометри чи милі тощо) +- формати часу та дати +- розкладки клавіатури + +Засадничою частиною інтернаціоналізації є праця [Консорціуму Unicode](https://home.unicode.org/). Unicode підтримує не лише варіації світових письмових систем, а й культурні відмінності, наприклад, валюти та формати часу та дати. + +## Дивіться також + +- {{glossary("Localization", "Локалізація")}} +- [Діяльність з інтернаціоналізації W3C](https://www.w3.org/International/) +- [Консорціум Unicode](https://home.unicode.org/) +- [API інтернаціоналізації JavaScript](/uk/docs/Web/JavaScript/Reference/Global_Objects/Intl) diff --git a/files/uk/glossary/json_type_representation/index.md b/files/uk/glossary/json_type_representation/index.md new file mode 100644 index 0000000000..2afc8fce70 --- /dev/null +++ b/files/uk/glossary/json_type_representation/index.md @@ -0,0 +1,21 @@ +--- +title: Представлення типу в JSON +slug: Glossary/JSON_type_representation +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +{{glossary("JSON")}} – це зручний і широко вживаний формат для серіалізації об'єктів, масивів, чисел, рядків, булевих значень і `null`. +[JSON підтримує не всі типи даних, дозволені JavaScript](/uk/docs/Web/JavaScript/Reference/Global_Objects/JSON#riznytsia-mizh-javascript-i-json), тобто об'єкти JavaScript, які використовують ці несумісні типи, не можуть бути безпосередньо серіалізовані в JSON. + +_Представлення типу в JSON_ – це сумісний з JSON об'єкт, який є рівносильним об'єктом JavaScript, властивості якого закодовані так, що інформацію _можна_ серіалізувати в JSON. +Зазвичай такий об'єкт має такі ж властивості, що й вихідний об'єкт, у випадку сумісних типів даних, а несумісні властивості перетворюються чи серіалізуються в сумісні типи. +Наприклад, властивості вихідного об'єкта, що містять буфери, у представленні типу в JSON можуть бути закодовані в рядки згідно з алгоритмом [base64url](/uk/docs/Glossary/Base64). + +Об'єкт, який не може бути автоматично серіалізований у JSON за допомогою методу [`JSON.stringify()`](/uk/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify), може мати метод примірника під назвою `toJSON()`, який повертає _представлення типу в JSON_ вихідного об'єкта. +Тоді [`JSON.stringify()`](/uk/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) використовує `toJSON()` для отримання об'єкта, який буде рядковано замість вихідного об'єкта. +[`PublicKeyCredential.toJSON()`](/uk/docs/Web/API/PublicKeyCredential/toJSON) і [`Performance.toJSON()`](/uk/docs/Web/API/Performance/toJSON) є прикладами такого підходу. + +Рядок JSON, серіалізований у такий спосіб, може бути десеріалізований назад в об'єкт _представлення типу в JSON_ за допомогою [`JSON.parse()`](/uk/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse). +Заведено надавати метод-перетворювач, такий як {{domxref("PublicKeyCredential.parseCreationOptionsFromJSON_static", "PublicKeyCredential.parseCreationOptionsFromJSON()")}}, для перетворення _представлення типу в JSON_ назад у вихідний об'єкт. diff --git a/files/uk/glossary/kebab_case/index.md b/files/uk/glossary/kebab_case/index.md new file mode 100644 index 0000000000..718de35ed4 --- /dev/null +++ b/files/uk/glossary/kebab_case/index.md @@ -0,0 +1,19 @@ +--- +title: Шашличний регістр (kebab case) +slug: Glossary/Kebab_case +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Шашличний регістр** (kebab case) – це спосіб написання фраз без пробілів, де пробіли замінюються дефісами `-`, а слова, як правило, складаються лише з малих літер. Його назва походить від схожості слів з м'ясом на шашличному шампурі. Часто стилізується як "kebab-case", щоб нагадати читачеві про його зовнішній вигляд. + +Шашличний регістр нерідко використовується як узгоджений спосіб іменування змінних. Проте в багатьох мовах дефіси представляють віднімання, тож шашличний регістр використати неможливо. Властивості CSS, такі як {{cssxref("background-color")}} і {{cssxref("font-family")}}, а також атрибути HTML, такі як [`aria-label`](/uk/docs/Web/Accessibility/ARIA/Attributes/aria-label) і [`data-*`](/uk/docs/Web/HTML/Global_attributes/data-*), написані у шашличному регістрі. + +Слова в шашличному регістрі нерідко просто звуть _дефісними_. + +## Дивіться також + +- [Верблюдячий регістр](/uk/docs/Glossary/Camel_case) +- [Зміїний регістр](/uk/docs/Glossary/Snake_case) +- [Правило typescript-eslint: `naming-convention`](https://typescript-eslint.io/rules/naming-convention/) diff --git a/files/uk/glossary/render_blocking/index.md b/files/uk/glossary/render_blocking/index.md index 864a890726..3239c016eb 100644 --- a/files/uk/glossary/render_blocking/index.md +++ b/files/uk/glossary/render_blocking/index.md @@ -14,4 +14,4 @@ page-type: glossary-definition - [Оптимізація продуктивності CSS](/uk/docs/Learn/Performance/CSS) - [Оптимізація продуктивності JavaScript](/uk/docs/Learn/Performance/JavaScript) -- [Що таке візуалізаційно-блокувальні ресурси, та як виправити проблеми блокування візуалізації](https://speckyboy.com/render-blocking/) на Speckyboy (2018) +- [Що таке візуалізаційно-блокувальні ресурси, та як виправити проблеми блокування візуалізації](https://drukarnia.com.ua/articles/sho-take-vizualizaciino-blokuvalni-resursi-ta-yak-vipraviti-problemi-z-blokuvannyam-vizualizaciyi-pere-qXKs9) – переклад на Друкарні (2023) статті зі Speckyboy (2018) diff --git a/files/uk/glossary/repaint/index.md b/files/uk/glossary/repaint/index.md index a8bad309fa..7316187484 100644 --- a/files/uk/glossary/repaint/index.md +++ b/files/uk/glossary/repaint/index.md @@ -11,4 +11,4 @@ page-type: glossary-definition ## Дивіться також - [Перетасування](/uk/docs/Glossary/Reflow) -- [Розуміння перетасування та перемальовування у браузері](https://dev.to/gopal1996/understanding-reflow-and-repaint-in-the-browser-1jbg) на dev.to (2020) +- [Розуміння перетасування та перемальовування у браузері](https://drukarnia.com.ua/articles/rozuminnya-peretasuvannya-ta-peremalovuvannya-v-brauzeri-pereklad-G5vRt) – переклад на Друкарні (2023) статті з dev.to (2020) diff --git a/files/uk/glossary/snake_case/index.md b/files/uk/glossary/snake_case/index.md new file mode 100644 index 0000000000..c23e3b23be --- /dev/null +++ b/files/uk/glossary/snake_case/index.md @@ -0,0 +1,21 @@ +--- +title: Зміїний регістр +slug: Glossary/Snake_case +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**Зміїний регістр** – це спосіб написання фраз без пробілів, при якому пробіли замінюються підкресленнями `_`, а слова зазвичай складаються лише з малих літер. Нерідко його назву стилізують як "snake_case", щоб нагадати читачам про зовнішній вигляд цього стилю. + +Зміїний регістр нерідко використовується як стандарт назв змінних. Наступні назви мають зміїний регістр: `left_shift`, `bitwise_invert`, `matrix_transpose`. + +Зверніть увагу на те, що зміїний регістр ніколи не вміщає великих літер. Іноді сталі записуються лише великими літерами, наприклад, {{jsxref("Number.MAX_SAFE_INTEGER")}} у JavaScript. Це зазвичай не вважається зміїним регістром. Натомість такий стиль іноді називають _крикливим зміїним регістром_. + +Зміїний регістр – найпопулярніший стиль в Python, Rust та деяких інших мовах програмування. + +## Дивіться також + +- [Верблюдячий регістр](/uk/docs/Glossary/Camel_case) +- [Шашличний регістр](/uk/docs/Glossary/Kebab_case) +- [Правило typescript-eslint: `naming-convention`](https://typescript-eslint.io/rules/naming-convention/) diff --git a/files/uk/glossary/truthy/index.md b/files/uk/glossary/truthy/index.md index c47bdd6d5d..60b4b396ec 100644 --- a/files/uk/glossary/truthy/index.md +++ b/files/uk/glossary/truthy/index.md @@ -6,7 +6,7 @@ page-type: glossary-definition {{GlossarySidebar}} -**Істинне** значення в {{Glossary("JavaScript")}} – це значення, яке вважається `true`, коли зустрічається в {{Glossary("Boolean", "булевому")}} контексті. Всі значення є істинними, якщо не визначені як {{Glossary("Falsy", "хибні")}}. Тобто _істинними_ є всі значення, окрім `false`, `0`, `-0`, `0n`, `""`, `null`, `undefined` і `NaN`. +**Істинне** значення в {{Glossary("JavaScript")}} – це значення, яке вважається `true`, коли зустрічається в {{Glossary("Boolean", "булевому")}} контексті. Всі значення є істинними, якщо не визначені як {{Glossary("Falsy", "хибні")}}. Тобто _істинними_ є всі значення, окрім `false`, `0`, `-0`, `0n`, `""`, `null`, `undefined`, `NaN` і {{domxref("document.all")}}. {{Glossary("JavaScript")}} використовує в булевих контекстах {{Glossary("Type_Coercion", "зведення типів")}}. diff --git a/files/uk/web/css/--_star_/index.md b/files/uk/web/css/--_star_/index.md index 78d2998d9a..db8dc04076 100644 --- a/files/uk/web/css/--_star_/index.md +++ b/files/uk/web/css/--_star_/index.md @@ -1,5 +1,5 @@ --- -title: "Кастомні властивості (--*) – змінні CSS" +title: "Своєрідні властивості (--*) – змінні CSS" slug: Web/CSS/--* page-type: guide browser-compat: css.properties.custom-property @@ -7,9 +7,9 @@ browser-compat: css.properties.custom-property {{CSSRef}} -Імена властивостей, що починаються з `--`, наприклад, `--example-name`, є _кастомними властивостями_, котрі містять значення, що можуть бути використані в інших оголошеннях за допомогою функції {{cssxref("var", "var()")}}. +Імена властивостей, що починаються з `--`, наприклад, `--example-name`, є _своєрідними властивостями_, котрі містять значення, що можуть бути використані в інших оголошеннях за допомогою функції {{cssxref("var", "var()")}}. -Сфера застосування кастомних властивостей обмежена елементом (елементами), на котрих вони оголошені, а також їм властива каскадність: значення певної кастомної властивості береться з оголошення, обраного каскадним алгоритмом. +Сфера застосування своєрідних властивостей обмежена елементом (елементами), на котрих вони оголошені, а також їм властива каскадність: значення певної своєрідної властивості береться з оголошення, обраного каскадним алгоритмом. {{CSSInfo}} @@ -24,7 +24,7 @@ browser-compat: css.properties.custom-property - `` - : Це значення захоплює будь-яку послідовність з однієї чи більше лексем, поки не зустрінеться неприпустима лексема. Воно представляє усю повноту того, що дійсне оголошення може мати за своє значення. -> **Примітка:** Імена кастомних властивостей чутливі до регістру: `--my-color` вважатиметься окремою кастомною властивістю поруч із `--My-color`. +> **Примітка:** Імена своєрідних властивостей чутливі до регістру: `--my-color` вважатиметься окремою своєрідною властивістю поруч із `--My-color`. ## Приклад @@ -82,3 +82,4 @@ browser-compat: css.properties.custom-property - [Використання змінних CSS](/uk/docs/Web/CSS/Using_CSS_custom_properties) - Функція {{cssxref("var", "var()")}} +- Директива {{cssxref("@property")}} diff --git a/files/uk/web/css/-moz-force-broken-image-icon/index.md b/files/uk/web/css/-moz-force-broken-image-icon/index.md index 1166345d79..a0a0c38ae3 100644 --- a/files/uk/web/css/-moz-force-broken-image-icon/index.md +++ b/files/uk/web/css/-moz-force-broken-image-icon/index.md @@ -68,4 +68,4 @@ img { ## Дивіться також -- [Вада Webkit 58646](https://bugzil.la/58646) +- [Вада Firefox 58646](https://bugzil.la/58646) diff --git a/files/uk/web/css/-moz-image-rect/index.md b/files/uk/web/css/-moz-image-rect/index.md index 2c299769b4..e2f38e0bc8 100644 --- a/files/uk/web/css/-moz-image-rect/index.md +++ b/files/uk/web/css/-moz-image-rect/index.md @@ -3,12 +3,12 @@ title: "-moz-image-rect" slug: Web/CSS/-moz-image-rect page-type: css-function status: - - experimental + - deprecated - non-standard browser-compat: css.types.-moz-image-rect --- -{{CSSRef}}{{Non-standard_Header}}{{SeeCompatTable}} +{{CSSRef}}{{Non-standard_Header}}{{Deprecated_Header}} Властивість [CSS](/uk/docs/Web/CSS) **`-moz-image-rect`** (Mozilla – прямокутник зображення) для {{CSSxRef("background-image")}} дає змогу використовувати частину більшого зображення як тло. diff --git a/files/uk/web/css/-moz-image-region/index.md b/files/uk/web/css/-moz-image-region/index.md index 38b7efc9cd..c50bc8733b 100644 --- a/files/uk/web/css/-moz-image-region/index.md +++ b/files/uk/web/css/-moz-image-region/index.md @@ -13,8 +13,6 @@ browser-compat: css.properties.-moz-image-region Синтаксис подібний до синтаксису властивості {{CSSxRef("clip")}}. Усі чотири значення відносні щодо верхнього лівого кута зображення. -> **Примітка:** Для системи, що працює на будь-якому тлі, дивіться {{CSSxRef("-moz-image-rect")}}. - ## Синтаксис ```css diff --git a/files/uk/web/css/@media/index.md b/files/uk/web/css/@media/index.md new file mode 100644 index 0000000000..58a34deb67 --- /dev/null +++ b/files/uk/web/css/@media/index.md @@ -0,0 +1,252 @@ +--- +title: "@media" +slug: Web/CSS/@media +page-type: css-at-rule +browser-compat: css.at-rules.media +--- + +{{CSSRef}} + +[Директива](/uk/docs/Web/CSS/At-rule) [CSS](/uk/docs/Web/CSS) **`@media`** може вживатися для застосування частини списку стилів на основі результату одного чи більше [медіазапитів](/uk/docs/Web/CSS/CSS_media_queries/Using_media_queries). За її допомогою можна задати медіазапит і блок CSS до застосування тоді та тільки тоді, коли цей медіазапит відповідає пристроєві, на якому використовується вміст. + +> **Примітка:** У JavaScript правила, створені за допомогою `@media`, можна отримати за допомогою інтерфейсу {{domxref("CSSMediaRule")}} об'єктної моделі CSS. + +{{EmbedInteractiveExample("pages/tabbed/at-rule-media.html", "tabbed-standard")}} + +## Синтаксис + +Директива `@media` повинна стояти на зовнішньому рівні коду або бути вкладена в якусь іншу [директиву умовного групування](/uk/docs/Web/CSS/At-rule#pravyla-umovnykh-hrup). + +```css +/* На зовнішньому рівні коду */ +@media screen and (min-width: 900px) { + article { + padding: 1rem 3rem; + } +} + +/* Вкладена в іншу умовну директиву */ +@supports (display: flex) { + @media screen and (min-width: 900px) { + article { + display: flex; + } + } +} +``` + +Більше про синтаксис медіазапитів дивіться в статті [Використання медіазапитів](/uk/docs/Web/CSS/CSS_media_queries/Using_media_queries#syntaksys). + +## Опис + +### Типи медіа + +_Типи медіа_ описують загальні категорії пристроїв. +Коли не використовуються логічні оператори `not` і `only`, тип медіа є необов'язковим, – якщо він не вказаний, то вважається, що він дорівнює `all`. + +- `all` + - : Підходить для всіх пристроїв. +- `print` + - : Для сторінкових матеріалів і документів, що переглядаються на екрані в режимі попереднього перегляду перед друком. (Будь ласка, дивіться [сторінкові медіа](/uk/docs/Web/CSS/CSS_paged_media) для отримання інформації про проблеми форматування, які специфічні для цих форматів.) +- `screen` + - : Перш за все для екранів. + +> **Примітка:** CSS2.1 і [Медіазапити 3](https://drafts.csswg.org/mediaqueries-3/#background) визначали декілька додаткових типів медіа (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed` і `aural`), але вони стали нерекомендованими в [Медіазапитах 4](https://drafts.csswg.org/mediaqueries/#media-types) і не повинні використовуватися. + +### Можливості медіа + +_Можливості медіа_ описують конкретні характеристики {{glossary("User agent", "користувацького агента")}}, пристрій виведення чи оточення. +Вирази можливостей медіа перевіряють на їхню присутність або значення, і є цілковито необов'язковими. Кожен вираз можливості медіа повинен бути оточений дужками. + +- {{cssxref("@media/any-hover", "any-hover")}} + - : Чи дає який-небудь доступний механізм уведення користувачеві змогу наводити курсор на елементи? + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/any-pointer", "any-pointer")}} + - : Чи є який-небудь доступний механізм уведення пристроєм-вказівником, і якщо так, то наскільки він точний? + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/aspect-ratio", "aspect-ratio")}} + - : Співвідношення ширини до висоти області перегляду +- {{cssxref("@media/color", "color")}} + - : Число біт на колірний компонент пристрою виведення, або нуль, якщо пристрій не кольоровий +- {{cssxref("@media/color-gamut", "color-gamut")}} + - : Приблизний діапазон кольорів, що підтримується користувацьким агентом і пристроєм виведення. + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/color-index", "color-index")}} + - : Число записів у таблиці пошуку кольорів пристрою виведення, або нуль, якщо пристрій не використовує таку таблицю +- {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{deprecated_inline}} + - : Співвідношення ширини до висоти пристрою виведення. + Нерекомендований від Медіазапитів рівня 4. +- {{cssxref("@media/device-height", "device-height")}} {{deprecated_inline}} + - : Висота поверхні візуалізації пристрою виведення. + Нерекомендований від Медіазапитів рівня 4. +- {{cssxref("@media/device-width", "device-width")}} {{deprecated_inline}} + - : Ширина поверхні візуалізації пристрою виведення. Нерекомендований від Медіазапитів рівня 4. +- {{cssxref("@media/display-mode", "display-mode")}} + - : Режим виведення застосунку, як це визначено в полі [`display`](/uk/docs/Web/Manifest#display) маніфесту вебзастосунку. + Визначено в [специфікації Маніфесту вебзастосунку](https://w3c.github.io/manifest/#the-display-mode-media-feature). +- {{cssxref("@media/dynamic-range", "dynamic-range")}} + - : Поєднання яскравості, контрастності та глибини кольору, які підтримуються користувацьким агентом і пристроєм виведення. Додано в Медіазапитах рівня 5. +- {{cssxref("@media/forced-colors", "forced-colors")}} + - : З'ясувати, чи обмежує користувацький агент палітру кольорів. + Додано в Медіазапитах рівня 5. +- {{cssxref("@media/grid", "grid")}} + - : Чи використовує пристрій сітку або бітовий екран? +- {{cssxref("@media/height", "height")}} + - : Висота області перегляду. +- {{cssxref("@media/hover", "hover")}} + - : Чи дає основний механізм уведення користувачеві змогу наводити курсор на елементи? + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/inverted-colors", "inverted-colors")}} + - : Чи обертає користувацький агент або операційна система кольори? + Додано в Медіазапитах рівня 5. +- {{cssxref("@media/monochrome", "monochrome")}} + - : Кількість біт на піксель у монохромному буфері кадру пристрою виведення, або нуль, якщо пристрій не монохромний. +- {{cssxref("@media/orientation", "orientation")}} + - : Орієнтація області перегляду. +- {{cssxref("@media/overflow-block", "overflow-block")}} + - : Як пристрій виведення обробляє вміст, що виходить за межі області перегляду вздовж блокової осі? + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/overflow-inline", "overflow-inline")}} + - : Чи можна прокручувати вміст, що не вміщається в область перегляду вздовж рядкової осі? + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/pointer", "pointer")}} + - : Чи є головний механізм введення пристроєм-вказівником, і якщо так, то наскільки точним він є? + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} + - : З'ясувати, чи віддає користувач перевагу світлій, чи темній колірній схемі. + Додано в Медіазапитах рівня 5. +- {{cssxref("@media/prefers-contrast", "prefers-contrast")}} + - : З'ясовує, чи вимагає користувач від системи збільшити або зменшити контрастність між сусідніми кольорами. + Додано в Медіазапитах рівня 5. +- {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} + - : Користувач віддає перевагу меншому рівню руху на сторінці. + Додано в Медіазапитах рівня 5. +- {{cssxref("@media/resolution", "resolution")}} + - : Піксельна щільність пристрою виведення. +- {{cssxref("@media/scripting", "scripting")}} + - : Визначає, чи доступно використання сценаріїв (тобто JavaScript). + Додано в Медіазапитах рівня 5. +- {{cssxref("@media/update", "update")}} + - : Як часто пристрій виведення може змінювати вигляд вмісту. + Додано в Медіазапитах рівня 4. +- {{cssxref("@media/video-dynamic-range", "video-dynamic-range")}} + - : Поєднання яскравості, контрастності та глибини кольору, які підтримує план відео користувацького агента і пристрою виведення. Додано в Медіазапитах рівня 5. +- {{cssxref("@media/width", "width")}} + - : Ширина області перегляду, включно з шириною смуги прокрутки. + +### Логічні оператори + +_Логічні оператори_ `not`, `and`, `only` і `or` можуть використовуватися для створення складних медіазапитів. +Також можна поєднувати декілька медіазапитів в одне правило, розділяючи їх комами. + +- `and` + - : Використовується для поєднання декількох можливостей медіа в один медіазапит, вимагаючи `true` від кожної з можливостей, щоб запит був `true`. + Також використовується для поєднання можливостей медіа з типами медіа. +- `not` + + - : Використовується для заперечення медіазапиту, повертаючи `true`, якщо інакше запит повернув би `false`. + Якщо цей оператор присутній в розділеному комами списку запитів, то заперечує лише конкретний запит, до якого застосовується. + Якщо використовується оператор `not`, то _обов'язково_ повинен бути вказаний тип медіа. + + > **Примітка:** На рівні 3 ключове слово `not` не може використовуватися для заперечення окремого виразу можливості медіа, а лише цілого медіазапиту. + +- `only` + - : Застосовує стиль лише тоді, коли весь запит має відповідність. + Це корисно, щоб не дати старим браузерам застосувати вибрані стилі. + Коли `only` не використовується, старі браузери тлумачать запит `screen and (max-width: 500px)` як `screen`, ігноруючи решту запиту, і застосовують його стилі на всіх екранах. + Якщо використовується оператор `only`, _обов'язково_ повинен бути заданий тип медіа. +- `,` (кома) + - : Коми вживаються для поєднання різних медіазапитів у одне правило. + Кожен запит у списку, розділеному комами, розглядається окремо від інших. + Таким чином, якщо будь-який запит у списку дає `true`, то все твердження медіа дає `true`. + Інакше кажучи, списки поводяться як логічний оператор `or`. +- `or` + - : Рівносильно операторові `,`. Додано в Медіазапитах рівня 4.\ + +### Клієнтські підказки користувацькому агентові + +Частина медіазапитів має відповідні [клієнтські підказки користувацькому агентові](/uk/docs/Web/HTTP/Client_hints). +Це заголовки HTTP, що запитують вміст, який наперед оптимізований для конкретних потреб медіа. +Серед них {{HTTPHeader("Sec-CH-Prefers-Color-Scheme")}} і {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}}. + +## Занепокоєння щодо доступності + +Щоб якнайкраще врахувати потреби людей, які змінюють розмір тексту на сайті, слід використовувати для ваших [медіазапитів](/uk/docs/Web/CSS/CSS_media_queries/Using_media_queries) одиниці [`em`](/uk/docs/Learn/CSS/Building_blocks/Values_and_units#chyslovi-znachennia), коли потрібні значення {{cssxref("<length>")}}. + +Як [`em`](/uk/docs/Learn/CSS/Building_blocks/Values_and_units#chyslovi-znachennia), так і [`px`](/uk/docs/Learn/CSS/Building_blocks/Values_and_units#chyslovi-znachennia) є дійсними одиницями, але [`em`](/uk/docs/Learn/CSS/Building_blocks/Values_and_units#chyslovi-znachennia) працює краще, якщо користувач змінює розмір тексту в браузері. + +Також варто розглянути медіазапити чи [клієнтські підказки користувацькому агентові](/uk/docs/Web/HTTP/Client_hints#kliientski-pidkazky-korystuvatskomu-ahentovi), щоб покращити користувацький досвід. +Наприклад, медіазапит [`prefers-reduced-motion`](/uk/docs/Web/CSS/@media/prefers-reduced-motion) або відповідний заголовок {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}}) можна використати для мінімізації кількості анімації чи руху, на основі побажань користувача. + +## Безпека + +Оскільки медіазапити надають інформацію про можливості – і, відповідно, про функції та дизайн – пристрою, з яким працює користувач, існує потенціал їхнього зловживання для створення ["відбитку"](/uk/docs/Glossary/Fingerprinting), який ідентифікує пристрій, або принаймні категоризує його до певної міри деталізації, що може бути небажаним для користувачів. + +У зв'язку з цим потенціалом браузер може вирішити якось викривити повернені значення, щоб запобігти їх використанню для точного ідентифікування комп'ютера. Браузер може також пропонувати додаткові заходи в цій галузі; наприклад, якщо ввімкнено налаштування Firefox "Опиратися відстеженню за відбитком", то чимало медіазапитів віддає усталені значення, а не значення, що представляють реальний стан пристрою. + +## Формальний синтаксис + +{{csssyntax}} + +## Приклади + +### Перевірка на типи медіа – друк і екран + +```css +@media print { + body { + font-size: 10pt; + } +} + +@media screen { + body { + font-size: 13px; + } +} + +@media screen, print { + body { + line-height: 1.2; + } +} + +@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) { + body { + line-height: 1.4; + } +} +``` + +У 4 рівні Медіазапитів запроваджено новий синтаксис діапазону, що дає змогу писати менш об'ємні медіазапити при перевірці будь-якої можливості, що приймає діапазон, як показано в наступних прикладах: + +```css +@media (height > 600px) { + body { + line-height: 1.4; + } +} + +@media (400px <= width <= 700px) { + body { + line-height: 1.4; + } +} +``` + +Більше прикладів – на сторінці [Застосування медіазапитів](/uk/docs/Web/CSS/CSS_media_queries/Using_media_queries). + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- [Застосування медіазапитів](/uk/docs/Web/CSS/CSS_media_queries/Using_media_queries) +- У JavaScript `@media` можна отримати через інтерфейс об'єктної моделі CSS {{domxref("CSSMediaRule")}}. +- [Розширені можливості медіа Mozilla](/uk/docs/Web/CSS/Mozilla_Extensions#mozhlyvosti-media) +- [Розширені можливості медіа WebKit](/uk/docs/Web/CSS/WebKit_Extensions#mozhlyvosti-media) diff --git a/files/uk/web/css/@media/prefers-reduced-transparency/index.md b/files/uk/web/css/@media/prefers-reduced-transparency/index.md index 03ab4f4bb3..8700887c26 100644 --- a/files/uk/web/css/@media/prefers-reduced-transparency/index.md +++ b/files/uk/web/css/@media/prefers-reduced-transparency/index.md @@ -20,19 +20,12 @@ browser-compat: css.at-rules.media.prefers-reduced-transparency ## Користувацькі налаштування -У Firefox запит `reduce` враховується, якщо існує відповідне системне налаштування, інакше – він увімкнений, якщо також ввімкнено зниження рухів: +Різні операційні системи пропонують налаштування для зниження використання прозорості, і користувацькі агенти, ймовірно, покладаються на ці системні налаштування. +Також вони можуть покладатися на менш явні сигнали на платформах, що не пропонують такого окремого налаштування. -- У GTK/GNOME: Налаштування > Доступність > Бачення > Зниження анімації увімкнено. - - - У старіших версіях GNOME – GNOME Tweaks > Загальна вкладка (або Зовнішній вигляд, залежно від версії) > Анімації вимкнено. - - Інший варіант – додати `gtk-enable-animations = false` до блоку `[Settings]` [файлу конфігурації GTK 3](https://wiki.archlinux.org/title/GTK#Configuration). - -- У Plasma/KDE: Налаштування системи > Поведінка робочого простору -> Загальна поведінка > "Швидкість анімації" встановлена максимальною – "Миттєво". -- У Windows 10: Налаштування > Персоналізація > Кольори > Ефекти прозорості. -- У Windows 11: Налаштування > Персоналізація > Кольори > Ефекти прозорості. -- У macOS: Налаштування системи > Доступність > Відображення > Зниження прозорості. -- В iOS: Налаштування > Доступність > Рух. -- В Android 9+: Налаштування > Доступність > Відключити анімацію. +- У Windows 10 та 11: Налаштування > Персоналізація > Кольори > Ефекти прозорості. +- У macOS: Системні налаштування > Доступність > Дисплей > Менше прозорості. +- В iOS: Параметри > Доступність > Дисплей і розмір тексту > Зменшити прозорість. ## Приклади diff --git a/files/uk/web/css/_colon_blank/index.md b/files/uk/web/css/_colon_blank/index.md new file mode 100644 index 0000000000..aa334b993e --- /dev/null +++ b/files/uk/web/css/_colon_blank/index.md @@ -0,0 +1,60 @@ +--- +title: ":blank" +slug: Web/CSS/:blank +page-type: css-pseudo-class +status: + - experimental +browser-compat: css.selectors.blank +--- + +{{CSSRef}}{{SeeCompatTable}} + +> **Примітка:** Селектор `:blank` вважається ризикованим, оскільки CSSWG постійно його змінює. +> +> Дивіться [проблему CSSWG #1967](https://github.com/w3c/csswg-drafts/issues/1967). + +[Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:blank`** (незаповнений, прогалина) вибирає порожні елементи користувацького введення (наприклад, {{HTMLElement("input")}} або {{HTMLElement("textarea")}}). + +## Синтаксис + +```css +:blank { + /* ... */ +} +``` + +## Приклади + +### Простий приклад :blank + +У браузерах, що врешті-решт його підтримуватимуть, псевдоклас `:blank` дасть розробникам змогу певним чином виділяти контрольні поля, які не є обов'язковими, але все ж не мають введеного вмісту, можливо, як нагадування для користувачів. + +#### HTML + +```html + +``` + +#### CSS + +```css +textarea:blank { + border: 3px solid red; +} +``` + +#### Результат + +{{EmbedLiveSample('prostyi-pryklad-blank', '100%', 150)}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- {{CSSxRef(":empty")}} diff --git a/files/uk/web/css/_colon_in-range/index.md b/files/uk/web/css/_colon_in-range/index.md new file mode 100644 index 0000000000..9f76451a0a --- /dev/null +++ b/files/uk/web/css/_colon_in-range/index.md @@ -0,0 +1,97 @@ +--- +title: ":in-range" +slug: Web/CSS/:in-range +page-type: css-pseudo-class +browser-compat: css.selectors.in-range +--- + +{{CSSRef}} + +[Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:in-range`** (в діапазоні) представляє елементи {{htmlelement("input")}}, значення яких знаходиться в межах діапазону, заданого атрибутами [`min`](/uk/docs/Web/HTML/Element/input#min-minimum) та [`max`](/uk/docs/Web/HTML/Element/input#max-maksymum). + +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-in-range.html", "tabbed-shorter")}} + +Цей псевдоклас корисний для надання користувачам візуального сповіщення про те, що поточне значення лежить в заданих межах. + +> **Примітка:** Цей псевдоклас застосовується лише до елементів, що мають (і можуть приймати) обмеження за діапазоном. За відсутності такого обмеження елемент не може бути ані "в межах діапазону" ("in-range"), ані "поза межами діапазону". + +## Синтаксис + +```css +:in-range { + /* ... */ +} +``` + +## Приклади + +### HTML + +```html +
+ +
+``` + +### CSS + +```css +li { + list-style: none; + margin-bottom: 1em; +} + +input { + border: 1px solid black; +} + +input:in-range { + background-color: rgba(0, 255, 0, 0.25); +} + +input:out-of-range { + background-color: rgba(255, 0, 0, 0.25); + border: 2px solid red; +} + +input:in-range + label::after { + content: "приймається."; +} + +input:out-of-range + label::after { + content: "поза діапазоном!"; +} +``` + +### Результат + +{{EmbedLiveSample('pryklady', 600, 140)}} + +> **Примітка:** Порожній елемент `` не вважається поза діапазоном, тому його не буде вибрано псевдокласом `:out-of-range`. Псевдоклас [`:blank`](/uk/docs/Web/CSS/:blank) призначений для вибору порожніх полів, але на момент написання цього матеріалу він є експериментальним і не підтримується добре. Також можна використовувати атрибут `required` і псевдоклас [`:invalid`](/uk/docs/Web/CSS/:invalid) для надання більш загальної логіки та стилізації, щоб робити поля обов'язковими (`:invalid` стилізує порожні поля _та_ поля поза діапазоном). + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- {{cssxref(":out-of-range")}} +- [Валідація даних форми](/uk/docs/Learn/Forms/Form_validation) diff --git a/files/uk/web/css/_colon_indeterminate/index.md b/files/uk/web/css/_colon_indeterminate/index.md new file mode 100644 index 0000000000..23b6d82b3a --- /dev/null +++ b/files/uk/web/css/_colon_indeterminate/index.md @@ -0,0 +1,142 @@ +--- +title: ":indeterminate" +slug: Web/CSS/:indeterminate +page-type: css-pseudo-class +browser-compat: css.selectors.indeterminate +--- + +{{CSSRef}} + +[Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:indeterminate`** (невизначене) представляє будь-який елемент форми, чий стан – невизначений, наприклад, поля для галочки, які мають атрибут HTML [`indeterminate`](/uk/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes) зі значенням `true`, кнопки-перемикачі, які є членами групи, в якій всі кнопки-перемикачі не вибрані, та елементи {{HTMLElement("progress")}} в невизначеному стані. + +```css +/* Вибирає всі елементи , стан яких є невизначеним */ +input:indeterminate { + background: lime; +} +``` + +Елементи, на які націлюється цей селектор: + +- Елементи [``](/uk/docs/Web/HTML/Element/input/checkbox), чиїй властивості `indeterminate` присвоєно `true` за допомогою [JavaScript](/uk/docs/Web/JavaScript) +- Елементи [``](/uk/docs/Web/HTML/Element/input/radio), коли всі радіокнопки з однаковим значенням `name` в формі не вибрані +- Елементи {{HTMLElement("progress")}} у невизначеному стані + +## Синтаксис + +```plain +:indeterminate +``` + +## Приклади + +### Поле для галочки та радіокнопка + +Цей приклад застосовує особливі стилі до підписів, пов'язаних із невизначеними полями форми. + +#### HTML + +```html +
+ Поле для галочки +
+ + +
+
+ +
+ Радіокнопки +
+ + +
+
+ + +
+
+``` + +#### CSS + +```css +input:indeterminate + label { + background: lime; +} +``` + +```css hidden +fieldset { + padding: 1em 0.75em; +} + +fieldset:first-of-type { + margin-bottom: 1.5rem; +} + +fieldset:not(:first-of-type) > div:not(:last-child) { + margin-bottom: 0.5rem; +} +``` + +#### JavaScript + +```js +const inputs = document.getElementsByTagName("input"); + +for (let i = 0; i < inputs.length; i++) { + inputs[i].indeterminate = true; +} +``` + +#### Результат + +{{EmbedLiveSample('pole-dlia-halochky-ta-radioknopka', 'auto', 230)}} + +### Смуга прогресу + +#### HTML + +```html + +``` + +#### CSS + +```css +progress { + margin: 4px; +} + +progress:indeterminate { + width: 80vw; + height: 20px; +} +``` + +#### Результат + +{{EmbedLiveSample('smuha-prohresu', 'auto', 30)}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- [Вебформи – Робота з користувацькими даними](/uk/docs/Learn/Forms) +- [Оформлення вебформ](/uk/docs/Learn/Forms/Styling_web_forms) +- Атрибут [`indeterminate`](/uk/docs/Web/HTML/Element/input/checkbox#polia-dlia-halochok-z-nevyznachenym-stanom) елемента [``](/uk/docs/Web/HTML/Element/input/checkbox) +- Елемент {{HTMLElement("input")}} і інтерфейс {{domxref("HTMLInputElement")}}, який його реалізує. +- Селектор CSS {{cssxref(":checked")}} дає змогу оформлювати поля для галочок на основі того, чи є вони вибраними, чи ні diff --git a/files/uk/web/css/_colon_invalid/index.md b/files/uk/web/css/_colon_invalid/index.md index 1a72b14ce6..5eb280d80a 100644 --- a/files/uk/web/css/_colon_invalid/index.md +++ b/files/uk/web/css/_colon_invalid/index.md @@ -87,7 +87,7 @@ input:required:invalid { ### Показ секцій поетапно -У цьому прикладі `:invalid` використовується вкупі з `~`, [загальним сестринським комбінатором](/uk/docs/Web/CSS/General_sibling_combinator), щоб зробити форму поетапною, так що форма спочатку показує перший елемент для заповнення, а коли користувач заповнює кожен елемент, форма показує наступний. Коли вся форма заповнена, користувач може її подати. +У цьому прикладі `:invalid` використовується вкупі з `~`, [комбінатором подальших сестер](/uk/docs/Web/CSS/Subsequent-sibling_combinator), щоб зробити форму поетапною, так що форма спочатку показує перший елемент для заповнення, а коли користувач заповнює кожен елемент, форма показує наступний. Коли вся форма заповнена, користувач може її подати. #### HTML diff --git a/files/uk/web/css/_colon_optional/index.md b/files/uk/web/css/_colon_optional/index.md new file mode 100644 index 0000000000..7d223c5011 --- /dev/null +++ b/files/uk/web/css/_colon_optional/index.md @@ -0,0 +1,90 @@ +--- +title: ":optional" +slug: Web/CSS/:optional +page-type: css-pseudo-class +browser-compat: css.selectors.optional +--- + +{{CSSRef}} + +[Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:optional`** (необов'язковий) представляє всі елементи {{HTMLElement("input")}}, {{HTMLElement("select")}} і {{HTMLElement("textarea")}}, що не мають атрибута [`required`](/uk/docs/Web/HTML/Element/input#required-oboviazkovyi). + +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-optional.html", "tabbed-standard")}} + +Цей псевдоклас корисний для виділення полів, які необов'язкові для подавання форми. + +> **Примітка:** Псевдоклас {{cssxref(":required")}} вибирає _обов'язкові_ поля форм. + +## Синтаксис + +```css +:optional { + /* ... */ +} +``` + +## Приклади + +### Необов'язкове поле має фіолетову межу + +#### HTML + +```html +
+
+ + +
+ +
+ + +
+
+``` + +#### CSS + +```css +label { + display: block; + margin: 1px; + padding: 1px; +} + +.field { + margin: 1px; + padding: 1px; +} + +input:optional { + border-color: rebeccapurple; + border-width: 3px; +} +``` + +#### Результат + +{{EmbedLiveSample('pryklady', 600, 120)}} + +## Занепокоєння щодо доступності + +Коли [форма](/uk/docs/Web/HTML/Element/form) містить необов'язкові {{htmlelement("input", "поля")}}, обов'язкові поля повинні бути виділені за допомогою атрибута [`required`](/uk/docs/Web/HTML/Element/input#required-oboviazkovyi). Завдяки цьому можна мати впевненість, що люди, які користуються допоміжними технологіями, як то читачем з екрана, зможуть зрозуміти, які поля потребують дійсного вмісту для успішного подання форми. + +Обов'язкові поля також повинні бути виділені візуально, за допомогою способу, який не покладається для передачі змісту лише на колір. Зазвичай використовують описовий текст чи піктограму. + +- [MDN Розуміння WCAG, пояснення Настанови 3.3](/uk/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.3_%e2%80%94_input_assistance_help_users_avoid_and_correct_mistakes) +- [Розуміння Критерію успіху 3.3.2 | W3C розуміння WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html) + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- Інші псевдокласи, що стосуються валідації: {{cssxref(":required")}}, {{cssxref(":invalid")}}, {{cssxref(":valid")}} +- [Валідація даних форми](/uk/docs/Learn/Forms/Form_validation) diff --git a/files/uk/web/css/_colon_out-of-range/index.md b/files/uk/web/css/_colon_out-of-range/index.md new file mode 100644 index 0000000000..c4f89b8a0f --- /dev/null +++ b/files/uk/web/css/_colon_out-of-range/index.md @@ -0,0 +1,94 @@ +--- +title: ":out-of-range" +slug: Web/CSS/:out-of-range +page-type: css-pseudo-class +browser-compat: css.selectors.out-of-range +--- + +{{CSSRef}} + +[Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:out-of-range`** (поза діапазоном) представляє елементи {{htmlelement("input")}}, чиє поточне значення лежить поза межами діапазону, заданого атрибутами [`min`](/uk/docs/Web/HTML/Element/input#min-minimum) і [`max`](/uk/docs/Web/HTML/Element/input#max-maksymum). + +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-out-of-range.html", "tabbed-shorter")}} + +Цей псевдоклас корисний для надання користувачам візуального сповіщення того, що поточне значення поля лежить поза допустимими межами. + +> **Примітка:** Цей псевдоклас застосовується лише до елементів, що мають (і можуть мати) обмеження за діапазоном. За відсутності такого обмеження елемент не може бути ні "в межах діапазону", ні "поза діапазоном". + +## Синтаксис + +```css +:out-of-range { + /* ... */ +} +``` + +## Приклади + +### HTML + +```html +
+

Дійсними є значення від 1 до 10.

+ +
+``` + +### CSS + +```css +li { + list-style: none; + margin-bottom: 1em; +} + +input { + border: 1px solid black; +} + +input:in-range { + background-color: rgba(0, 255, 0, 0.25); +} + +input:out-of-range { + background-color: rgba(255, 0, 0, 0.25); + border: 2px solid red; +} + +input:in-range + label::after { + content: "приймається."; +} + +input:out-of-range + label::after { + content: "поза діапазоном!"; +} +``` + +### Результат + +{{EmbedLiveSample('pryklady', 600, 140)}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- {{cssxref(":in-range")}} +- [Валідація даних форми](/uk/docs/Learn/Forms/Form_validation) diff --git a/files/uk/web/css/_colon_placeholder-shown/index.md b/files/uk/web/css/_colon_placeholder-shown/index.md new file mode 100644 index 0000000000..97d2215e5e --- /dev/null +++ b/files/uk/web/css/_colon_placeholder-shown/index.md @@ -0,0 +1,137 @@ +--- +title: ":placeholder-shown" +slug: Web/CSS/:placeholder-shown +page-type: css-pseudo-class +browser-compat: css.selectors.placeholder-shown +--- + +{{CSSRef}} + +[Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:placeholder-shown`** (показано заповнювач) представляє будь-який елемент {{HTMLElement("input")}} або {{HTMLElement("textarea")}}, який наразі показує [текст заповнювача](/uk/docs/Web/HTML/Element/input#placeholder-zapovniuvach). + +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-placeholder-shown.html", "tabbed-shorter")}} + +## Синтаксис + +```css +:placeholder-shown { + /* ... */ +} +``` + +## Приклади + +### Базовий приклад + +Цей приклад застосовує особливі стилі шрифту та меж, коли показано заповнювач. + +#### HTML + +```html + +``` + +#### CSS + +```css +input { + border: 1px solid black; + padding: 3px; +} + +input:placeholder-shown { + border-color: teal; + color: purple; + font-style: italic; +} +``` + +#### Результат + +{{EmbedLiveSample("bazovyi-pryklad", 200, 80)}} + +### Переповнення текстом + +Коли поля форми замалі, текст заповнювача може обрізатися в небажаний спосіб. Можна вжити властивість {{cssxref("text-overflow")}}, щоб змінити спосіб відображення тексту, що перелився через край. + +#### HTML + +```html +

+ +``` + +#### CSS + +```css +#input2:placeholder-shown { + text-overflow: ellipsis; +} +``` + +#### Результат + +{{EmbedLiveSample("perepovnennia-tekstom", 200, 80)}} + +### Підлаштоване поле введення + +Наступний приклад виділяє картку студентського квитка особливим стилем. + +#### HTML + +```html +
+

+ + +

+

+ + +

+

+ + +

+ +
+``` + +#### CSS + +```css +input { + background-color: #e8e8e8; + color: black; +} + +input.studentid:placeholder-shown { + background-color: yellow; + color: red; + font-style: italic; +} +``` + +#### Результат + +{{EmbedLiveSample("pidlashtovane-pole-vvedennia", 200, 180)}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- Псевдоелемент {{CSSxRef("::placeholder")}} оформлює _сам_ заповнювач. +- Пов'язані елементи HTML: {{HTMLElement("input")}}, {{HTMLElement("textarea")}} +- [Форми HTML](/uk/docs/Learn/Forms) diff --git a/files/uk/web/css/_colon_required/index.md b/files/uk/web/css/_colon_required/index.md new file mode 100644 index 0000000000..3ca2a290b7 --- /dev/null +++ b/files/uk/web/css/_colon_required/index.md @@ -0,0 +1,94 @@ +--- +title: ":required" +slug: Web/CSS/:required +page-type: css-pseudo-class +browser-compat: css.selectors.required +--- + +{{CSSRef}} + +[Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:required`** (обов'язковий) представляє всі елементи {{HTMLElement("input")}}, {{HTMLElement("select")}} і {{HTMLElement("textarea")}}, які мають атрибут [`required`](/uk/docs/Web/HTML/Element/input#required). + +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-required.html", "tabbed-standard")}} + +Цей псевдоклас корисний для виділення полів, які повинні містити дійсні дані, перш ніж форма може бути подана. + +> **Примітка:** Псевдоклас {{cssxref(":optional")}} вибирає _необов'язкові_ поля форм. + +## Синтаксис + +```css +:required { + /* ... */ +} +``` + +## Приклади + +### Обов'язкове поле має червону межу + +#### HTML + +```html +
+
+ + +
+ +
+ + +
+
+``` + +#### CSS + +```css +label { + display: block; + margin: 1px; + padding: 1px; +} + +.field { + margin: 1px; + padding: 1px; +} + +input:required { + border-color: #800000; + border-width: 3px; +} + +input:required:invalid { + border-color: #c00000; +} +``` + +#### Результат + +{{EmbedLiveSample('pryklady', 600, 120)}} + +## Занепокоєння щодо доступності + +До обов'язкових полів {{htmlelement("input")}} повинен бути застосований атрибут [`required`](/uk/docs/Web/HTML/Element/input#required-oboviazkovyi). Завдяки цьому можна мати впевненість, що люди, які користуються допоміжними технологіями, як то читачем з екрана, зможуть зрозуміти, які поля потребують дійсного вмісту для успішного подання форми. + +Якщо форма також містить [необов'язкові](/uk/docs/Web/CSS/:optional) поля, то обов'язкові поля повинні бути візуально позначені, у спосіб, який не покладається лише на колір для передачі змісту. Зазвичай використовують описовий текст чи піктограму. + +- [MDN Розуміння WCAG, пояснення Настанови 3.3](/uk/docs/Web/Accessibility/Understanding_WCAG/Understandable#guideline_3.3_%e2%80%94_input_assistance_help_users_avoid_and_correct_mistakes) +- [Розуміння Критерію успіху 3.3.2 | W3C розуміння WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-cues.html) + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- Інші псевдокласи, що стосуються валідації: {{cssxref(":optional")}}, {{cssxref(":invalid")}}, {{cssxref(":valid")}} +- [Валідація даних форми](/uk/docs/Learn/Forms/Form_validation) diff --git a/files/uk/web/css/_colon_valid/index.md b/files/uk/web/css/_colon_valid/index.md new file mode 100644 index 0000000000..04a5db6abc --- /dev/null +++ b/files/uk/web/css/_colon_valid/index.md @@ -0,0 +1,95 @@ +--- +title: ":valid" +slug: Web/CSS/:valid +page-type: css-pseudo-class +browser-compat: css.selectors.valid +--- + +{{CSSRef}} + +[Псевдоклас](/uk/docs/Web/CSS/Pseudo-classes) [CSS](/uk/docs/Web/CSS) **`:valid`** (дійсне, валідне, допустиме) представляє всі елементи {{HTMLElement("input")}} та інші елементи {{HTMLElement("form", "форми")}}, чий вміст успішно проходить [валідацію](/uk/docs/Web/HTML/Constraint_validation). Це дає змогу легко змусити дійсні поля приймати зовнішній вигляд, який допомагає користувачам перевіряти, що введені ними дані мають коректний формат. + +{{EmbedInteractiveExample("pages/tabbed/pseudo-class-valid.html", "tabbed-shorter")}} + +Цей псевдоклас корисний для виділення коректно заповнених полів для користувачів. + +## Синтаксис + +```css +:valid { + /* ... */ +} +``` + +## Приклади + +### Позначення дійсних і недійсних полів форми + +У цьому прикладі використовуються подібні структури, що вміщають додаткові елементи `` для генерації в них вмісту; тут вони для сповіщення про дійсні чи недійсні дані: + +```html +
+ + + +
+``` + +Щоб надати це сповіщення, використовується наступний CSS: + +```css +input + span { + position: relative; +} + +input + span::before { + position: absolute; + right: -20px; + top: 5px; +} + +input:invalid { + border: 2px solid red; +} + +input:invalid + span::before { + content: "✖"; + color: red; +} + +input:valid + span::before { + content: "✓"; + color: green; +} +``` + +Елементам `` задається `position: relative`, щоб можна було розташувати відносно них згенерований вміст. Потім абсолютно розташовується різний згенерований вміст, залежний від того, чи є дані форми дійсними, чи недійсними: зелена галочка чи червоний хрест, відповідно. Щоб додати трохи терміновості до недійсних даних, іще полям додано грубу червону межу, коли вони недійсні. + +> **Примітка:** Щоб додати ці підписи, вжито `::before`, оскільки `::after` вже використовується для підписів "required". + +Приклад можна спробувати нижче: + +{{EmbedGHLiveSample("learning-area/html/forms/pseudo-classes/valid-invalid.html", '100%', 430)}} + +Зверніть увагу на те, що обов'язкові текстові поля є недійсними, поки порожні, але дійсними, коли в них щось уведено. Поле електронної пошти, з іншого боку, є дійсним, коли порожнє, оскільки не є обов'язковим, але недійсним, коли містить щось, що не є коректною адресою електронної пошти. + +## Занепокоєння щодо доступності + +Зелений колір заведено використовувати для позначення дійсних полів. Люди, що мають якогось роду колірну сліпоту, не зможуть з'ясувати стан поля, якщо вкупі з кольором не використовується додатковий індикатор, що не покладається на колір для донесення сповіщення. Зазвичай використовується описовий текст чи піктограма. + +- [MDN Розуміння WCAG, Пояснення Настанови 1.4](/uk/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Розуміння критерію успіху 1.4.1 | W3C Розуміння WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html) + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- Інші псевдокласи, пов'язані з валідацією: {{cssxref(":required")}}, {{cssxref(":optional")}}, {{cssxref(":invalid")}} +- [Валідація даних форми](/uk/docs/Learn/Forms/Form_validation) +- Доступ до [стану валідності](/uk/docs/Web/API/ValidityState) з JavaScript diff --git a/files/uk/web/css/align-items/index.md b/files/uk/web/css/align-items/index.md index 46c7d23829..3f5601aa19 100644 --- a/files/uk/web/css/align-items/index.md +++ b/files/uk/web/css/align-items/index.md @@ -2,12 +2,6 @@ title: align-items slug: Web/CSS/align-items page-type: css-property -tags: - - CSS - - CSS Flexible Boxes - - CSS Property - - Reference - - recipe:css-property browser-compat: css.properties.align-items --- @@ -28,13 +22,13 @@ align-items: stretch; /* Позиційне шикування */ /* align-items не приймає значення left і right */ -align-items: center; /* Нагромадити елементи навколо центру */ -align-items: start; /* Нагромадити елементи на початку */ -align-items: end; /* Нагромадити елементи в кінці */ -align-items: flex-start; /* Нагромадити гнучкі елементи на початку */ -align-items: flex-end; /* Нагромадити гнучкі елементи в кінці */ -align-items: self-start; /* Нагромадити гнучкі елементи на початку */ -align-items: self-end; /* Нагромадити гнучкі елементи в кінці */ +align-items: center; +align-items: start; +align-items: end; +align-items: flex-start; +align-items: flex-end; +align-items: self-start; +align-items: self-end; /* Шикування за базовою лінією */ align-items: baseline; @@ -64,9 +58,9 @@ align-items: unset; - Ця властивість не застосовується до елементів блокового рівня, а також до комірок таблиць. - `flex-start` - - : Перехресно-початкові зовнішні краї гнучких елементів вишиковуються по перехресно-початковому краю шеренги. + - : Використовується лише при гнучкому компонуванні, шикує гнучкі елементи врівень з початковим краєм гнучкого контейнера за головною чи перехресною віссю. - `flex-end` - - : Перехресно-кінцеві зовнішні краї гнучких елементів вишиковуються по перехресно-кінцевому краю шеренги. + - : Використовується лише при гнучкому компонуванні, шикує гнучкі елементи врівень з кінцевим краєм гнучкого контейнера за головною чи перехресною віссю. - `center` - : Рамки полів гнучких елементів центруються в межах шеренги на перехресній осі. Якщо перехресний розмір елемента перевищує розмір гнучкого контейнера, то такий елемент рівномірно вийде за межі контейнера з обох боків. - `start` @@ -80,7 +74,7 @@ align-items: unset; - `baseline`, `first baseline`, `last baseline` - : Усі гнучкі елементи шикуються так, що їхні [базові лінії гнучкого контейнера](https://drafts.csswg.org/css-flexbox-1/#flex-baselines) збігаються. Елемент з найбільшою відстанню між його перехресно-початковим зовнішнім краєм та його базовою лінією стає врівень з перехресно-початковим краєм шеренги. - `stretch` - - : Гнучкі елементи розтягуються так, що перехресний розмір зовнішніх рамок елемента збігається з розміром шеренги, враховуючи накладенні висотою й шириною обмеження. + - : Якщо елементи менші за контейнер шикування, то елементи з автоматичним розміром рівномірно розтягуються, щоб заповнити контейнер, з урахуванням обмежень на ширину та висоту елементів. - `safe` - : Використовуються вкупі з ключовим словом шикування. Якщо обране ключове слово означає, що елемент виходить за межі контейнера шикування, призводячи до втрати даних, то елемент замість цього шикується так, ніби спосіб шикування – `start`. - `unsafe` diff --git a/files/uk/web/css/at-rule/index.md b/files/uk/web/css/at-rule/index.md new file mode 100644 index 0000000000..b17b1b6170 --- /dev/null +++ b/files/uk/web/css/at-rule/index.md @@ -0,0 +1,110 @@ +--- +title: Директиви +slug: Web/CSS/At-rule +page-type: guide +spec-urls: + - https://drafts.csswg.org/css-conditional-3/ + - https://compat.spec.whatwg.org/#css-at-rules +--- + +{{CSSRef}} + +**Директиви** – це [інструкції CSS](/uk/docs/Web/CSS/Syntax#instruktsii-css), що вказують CSS, як поводитися. Вони починаються зі знаку «равлика», '`@`' (`U+0040 COMMERCIAL AT`), за яким слідує ідентифікатор, і включають усе до наступної крапки з комою, '`;`' (`U+003B SEMICOLON`), або наступного [блоку CSS](/uk/docs/Web/CSS/Syntax#bloky-oholoshen-css), залежно від того, що зустрінеться першим. + +## Синтаксис + +### Звичайний + +```css +/* Загальна структура */ +@identifier (RULE); + +/* Приклад: вказує браузеру використовувати множину символів UTF-8 */ +@charset "utf-8"; +``` + +Є декілька звичайних директив, що визначаються їх ідентифікаторами, кожна з власним синтаксисом: + +- {{cssxref("@charset")}} – Визначає множину символів, що використовується в таблиці стилів. +- {{cssxref("@import")}} – Вказує рушієві CSS включити зовнішній список стилів. +- {{cssxref("@namespace")}} – Вказує рушієві CSS, що весь вміст директиви повинен вважатися таким, що має префікс у межах простору імен XML. + +### Вкладений + +```css +@identifier (RULE) { +} +``` + +Підмножина вкладених інструкцій, що може вживатися як інструкція списку стилів, а також всередині умовних групових директив. + +- {{cssxref("@media")}} – Умовна групова директива, що застосовує свій вміст, якщо пристрій відповідає критеріям умови, визначеної за допомогою _запиту медіа_. +- {{cssxref("@supports")}} – Умовна групова директива, що застосовує свій вміст, якщо браузер відповідає критеріям даної умови. +- {{cssxref("@document")}} {{deprecated_inline}} – Умовна групова директива, що застосовує свій вміст, якщо документ, в якому застосовується список стилів, відповідає критеріям даної умови. +- {{cssxref("@page")}} – Описує аспект змін компонування, що будуть застосовані при друку документа. +- {{cssxref("@font-face")}} – Описує аспект зовнішнього шрифту до завантаження. +- {{cssxref("@keyframes")}} – Описує аспект проміжних кроків у послідовності анімації CSS. +- {{cssxref("@counter-style")}} – Визначає конкретні стилі лічильників, що не є частиною попередньо визначеного набору стилів. +- {{cssxref("@font-feature-values")}} (плюс `@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset` і `@character-variant`) – Визначає загальні назви в {{cssxref("font-variant-alternates")}} для функцій, що активуються по-різному в OpenType. +- {{cssxref("@property")}} – Описує аспект нетипових властивостей і змінних. +- {{cssxref("@layer")}} – Оголошує шар каскаду і визначає порядок пріоритету в разі кількох шарів каскаду. + +## Умовні групові директиви + +Доволі подібно до значень властивостей, кожна директива має власний синтаксис. А проте, декілька з них можуть бути згруповані в спеціальну категорію, що називається **умовними груповими директивами**. Ці інструкції мають спільний синтаксис, і кожна з них може містити _вкладені інструкції_ — або _набори правил_, або _вкладені директиви_. Крім того, вони всі несуть спільне семантичне значення: всі вони посилаються на якийсь тип умови, яка в кожну мить часу оцінюється як **істинна** або **хибна**. Якщо умова оцінюється як **істинна**, то всі інструкції всередині групи будуть застосовані. + +Умовні групові директиви: + +- {{cssxref("@media")}}, +- {{cssxref("@supports")}}, +- {{cssxref("@document")}}. _(Відкладена до рівня 4 Специфікації CSS)_ + +Оскільки кожна умовна група може містити вкладені інструкції, то може бути невизначена кількість вкладень. + +## Вкладення @layer при вкладеному CSS + +[Каскадні шари](/uk/docs/Web/CSS/@layer) можна вкладати одне в одного, щоб [створювати вкладені шари](/uk/docs/Web/CSS/@layer#vkladeni-shary). Це робиться за допомогою `.` (крапки). Це також можна зробити за допомогою [вкладення CSS](/uk/docs/Web/CSS/CSS_nesting/Nesting_at-rules#vkladennia-kaskadnykh-shariv-layer). + +## Покажчик + +- {{cssxref("@charset")}} +- {{cssxref("@color-profile")}} +- {{cssxref("@container")}} +- {{cssxref("@counter-style")}} +- {{cssxref("@document")}} {{deprecated_inline}} +- {{cssxref("@font-face")}} +- {{cssxref("@font-feature-values")}} +- {{cssxref("@font-palette-values")}} +- {{cssxref("@import")}} +- {{cssxref("@keyframes")}} +- {{cssxref("@layer")}} +- {{cssxref("@media")}} +- {{cssxref("@namespace")}} +- {{cssxref("@page")}} +- {{cssxref("@property")}} +- {{cssxref("@supports")}} + +## Специфікації + +{{Specifications}} + +## See also + +- Ключові концепції CSS: + - [Синтаксис CSS](/uk/docs/Web/CSS/Syntax) + - [Коментарі](/uk/docs/Web/CSS/Comments) + - [Специфічність](/uk/docs/Web/CSS/Specificity) + - [Успадкування](/uk/docs/Web/CSS/inheritance) + - [Рамкова модель](/uk/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) + - [Режими компонування](/uk/docs/Web/CSS/Layout_mode) + - [Моделі візуального форматування](/uk/docs/Web/CSS/Visual_formatting_model) + - [Перекриття зовнішніх відступів](/uk/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) + - Значення + - [Початкові значення](/uk/docs/Web/CSS/initial_value) + - [Обчислені значення](/uk/docs/Web/CSS/computed_value) + - [Застосовані значення](/uk/docs/Web/CSS/used_value) + - [Фактичні значення](/uk/docs/Web/CSS/actual_value) + - [Синтаксис визначення значень](/uk/docs/Web/CSS/Value_definition_syntax) + - [Властивості-скорочення](/uk/docs/Web/CSS/Shorthand_properties) + - [Заміщені елементи](/uk/docs/Web/CSS/Replaced_element) + - [Модуль Вкладеності CSS](/uk/docs/Web/CSS/CSS_nesting) diff --git a/files/uk/web/css/backdrop-filter/index.md b/files/uk/web/css/backdrop-filter/index.md index 8f932a54f0..94f59c5939 100644 --- a/files/uk/web/css/backdrop-filter/index.md +++ b/files/uk/web/css/backdrop-filter/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.backdrop-filter {{CSSRef}} -Властивість [CSS](/uk/docs/Web/CSS) **`backdrop-filter`** (фільтр задника) дає змогу застосувати графічні ефекти, як то розмиття чи зсув кольору, до області під елементом. Через те, що вона застосовується до всього _під_ елементом, для того, аби помітити її ефект, необхідно зробити елемент чи його тло принаймні частково прозорим. +Властивість [CSS](/uk/docs/Web/CSS) **`backdrop-filter`** (фільтр задника) дає змогу застосувати графічні ефекти, як то розмиття чи зсув кольору, до області під елементом. Через те, що вона застосовується до всього _під_ елементом, для того, аби помітити її ефект, елемент повинен бути повністю або частково прозорим. {{EmbedInteractiveExample("pages/css/backdrop-filter.html")}} diff --git a/files/uk/web/css/css_animations/index.md b/files/uk/web/css/css_animations/index.md new file mode 100644 index 0000000000..cffed3b857 --- /dev/null +++ b/files/uk/web/css/css_animations/index.md @@ -0,0 +1,83 @@ +--- +title: Анімації CSS +slug: Web/CSS/CSS_animations +page-type: css-module +spec-urls: + - https://drafts.csswg.org/css-animations-2/ + - https://drafts.csswg.org/css-animations/ +--- + +{{CSSRef}} + +Модуль **Анімацій CSS** дає змогу анімувати значення властивостей CSS, як то background-position і transform, протягом часу, за допомогою ключових кадрів. Кожний ключовий кадр описує те, як анімований елемент повинен візуалізуватися в певний час протягом анімаційної послідовності. У модулі анімацій можна використовувати властивості для контролю тривалості, числа повторень, відкладеного старту та інших аспектів анімації. + +### Анімації в дії + +Щоб переглянути анімацію в рамці нижче, клацніть поле 'Відтворити анімацію' або наведіть на цю рамку курсор. Коли анімація активна, хмарка згори змінює форму, падають сніжинки, і рівень снігу внизу зростає. Щоб призупинити анімацію, зніміть галочку з поля або відведіть курсор від рамки. + +{{EmbedGHLiveSample("css-examples/modules/animation.html", '100%', 650)}} + +Цей зразок анімації використовує {{cssxref("animation-iteration-count")}} для того, щоб сніжинки падали раз за разом, {{cssxref("animation-direction")}}, щоб хмарка рухалася туди-сюди, {{cssxref("animation-fill-mode")}}, щоб рівень снігу зростав у відповідь на рух хмарки, та {{cssxref("animation-play-state")}}, щоб призупинити анімацію. + +Щоб переглянути код цієї анімації, [дивіться вихідний код на GitHub](https://github.com/webdoky/css-examples/blob/main/modules/animation.html). + +## Довідка + +### Властивості + +- Скорочення {{cssxref("animation")}} +- {{cssxref("animation-composition")}} +- {{cssxref("animation-delay")}} +- {{cssxref("animation-direction")}} +- {{cssxref("animation-duration")}} +- {{cssxref("animation-fill-mode")}} +- {{cssxref("animation-iteration-count")}} +- {{cssxref("animation-name")}} +- {{cssxref("animation-play-state")}} +- {{cssxref("animation-timing-function")}} +- {{cssxref("animation-timeline")}} + +### Директиви + +- {{cssxref("@keyframes")}} + +### Події + +Всі анімації, навіть ті, що мають тривалість 0 секунд, викидають анімаційні події. + +- {{domxref("Element/animationstart_event", "animationstart")}} +- {{domxref("Element/animationend_event", "animationend")}} +- {{domxref("Element/animationcancel_event", "animationcancel")}} +- {{domxref("Element/animationiteration_event", "animationiteration")}} + +### Інтерфейси + +- [API Вебанімацій]()(/uk/docs/Web/API/Web_Animations_API) +- {{domxref("AnimationEvent")}} +- {{domxref("CSSKeyframeRule")}} +- {{domxref("CSSKeyframesRule")}} + +## Посібники + +- [Застосування Анімацій CSS](/uk/docs/Web/CSS/CSS_animations/Using_CSS_animations) + - : Покроковий підручник зі створення анімацій за допомогою CSS. Ця стаття описує властивості CSS і директиву, що стосуються анімації, а також те, як вони взаємодіють одне з одним. +- [Поради та хитрощі Анімацій CSS](/uk/docs/Web/CSS/CSS_animations/Tips) + - : Поради та хитрощі, що допоможуть отримати максимум від Анімацій CSS. + +## Споріднені концепції + +- Властивість CSS {{cssxref("will-change")}} +- Тип даних [``](/uk/docs/Web/CSS/easing-function) +- Медіазапит [`prefers-reduced-motion`](/uk/docs/Web/CSS/@media/prefers-reduced-motion) +- Термін глосарія {{glossary("Bezier curve", "Крива Безьє")}} + +## Специфікації + +{{Specifications}} + +## Дивіться також + +- [Прокрутні анімації CSS](/uk/docs/Web/CSS/CSS_scroll-driven_animations) +- Властивості модуля [Переходів](/uk/docs/Web/CSS/CSS_transitions) CSS можуть запускати анімації на основі користувацьких дій +- Елемент HTML {{htmlelement("canvas")}} поряд з [API полотна](/uk/docs/Web/API/Canvas_API) та [API WebGL](/uk/docs/Web/API/WebGL_API) для малювання графіки та анімацій +- Інтерфейс {{domxref("SVGAnimationElement")}} для всіх інтерфейсів елементів, що стосуються анімації, включно з {{domxref("SVGAnimateElement")}}, {{domxref("SVGSetElement")}}, {{domxref("SVGAnimateColorElement")}}, {{domxref("SVGAnimateMotionElement")}} і {{domxref("SVGAnimateTransformElement")}} diff --git a/files/uk/web/css/css_backgrounds_and_borders/index.md b/files/uk/web/css/css_backgrounds_and_borders/index.md new file mode 100644 index 0000000000..c98f2880a6 --- /dev/null +++ b/files/uk/web/css/css_backgrounds_and_borders/index.md @@ -0,0 +1,143 @@ +--- +title: Фони та межі CSS +slug: Web/CSS/CSS_backgrounds_and_borders +page-type: css-module +spec-urls: https://drafts.csswg.org/css-backgrounds/ +--- + +{{CSSRef}} + +Модуль **Фонів і меж CSS** пропонує властивості для додавання до елементів меж, закруглених кутів та рамкових тіней. + +Можна додавати різні типи стилів меж, включно з межами, зробленими з зображень будь-якого типу зображень, від растрових зображень до градієнтів CSS. Межі можуть бути квадратними або закругленими, і для кожного кута можна задати різний радіус. Елементи можуть бути закругленими незалежно від того, чи мають вони видиму межу. + +Рамкові тіні включають внутрішні та зовнішні тіні, одну або кілька тіней, а також тіні, що переходять від непрозорості до прозорості. Зовнішня рамкова тінь відкидається так, ніби border-box елемента є непрозорим. Внутрішня тінь рамки відображає тінь так, ніби все за межами краю внутрішніх відступів – непрозоре. Тінь може бути непрозорою, а може мати відстань розсіювання, з кольором, що переходитиме до прозорого. + +Властивості в цьому модулі також дозволяють визначати, чи мають клітинки всередині {{HTMLElement("table")}} спільні, чи мають окремі межі. + +### Фони, межі та рамкові тіні в дії + +Цей зразок меж, фонів і рамкових тіней складається з відцентрованих зображень фонів, зроблених з лінійних і радіальних градієнтів. Низка рамкових тіней змушує межу ніби "виступати". В елемента зліва задано зображення межі. Елемент справа має закруглену пунктирну межу. + +{{EmbedGHLiveSample("css-examples/modules/backgrounds.html", '100%', 430)}} + +Фонові зображення визначені за допомогою {{cssxref("background-image")}}. Вони відцентровані за допомогою {{cssxref("background-position")}}. Різні значення властивості {{cssxref("background-clip")}} для кількох фонових зображень використовуються для того, щоб ці фонові зображення залишалися всередині рамки вмісту. Колір фону обрізається до рамки внутрішніх відступів, що не дає фону проступати крізь прозорі секції для {{cssxref("border-image")}} та {{cssxref("border-style", "пунктирний")}} {{cssxref("border")}}. Закруглені кути в елементі справа створюються за допомогою властивості {{cssxref("border-radius")}}. Одне оголошення {{cssxref("box-shadow")}} використовується для задання всіх тіней, як внутрішніх, так і зовнішніх. + +Щоб переглянути код цього зразка, [дивіться його вихідний код на GitHub](https://github.com/webdoky/css-examples/blob/main/modules/backgrounds.html). + +## Довідка + +### Властивості + +- {{cssxref("background-attachment")}} +- {{cssxref("background-clip")}} +- {{cssxref("background-color")}} +- {{cssxref("background-image")}} +- {{cssxref("background-origin")}} +- {{cssxref("background-position")}} +- {{cssxref("background-repeat")}} +- {{cssxref("background-size")}} +- Скорочення {{cssxref("background")}} +- {{cssxref("background-position-x")}} {{experimental_inline}} +- {{cssxref("background-position-y")}} {{experimental_inline}} +- {{cssxref("background-position-inline")}} {{experimental_inline}} +- {{cssxref("background-position-block")}} {{experimental_inline}} + +- {{cssxref("border-bottom-color")}} +- {{cssxref("border-bottom-style")}} +- {{cssxref("border-bottom-width")}} +- Скорочення {{cssxref("border-bottom")}} +- {{cssxref("border-left-color")}} +- {{cssxref("border-left-style")}} +- {{cssxref("border-left-width")}} +- Скорочення {{cssxref("border-left")}} +- {{cssxref("border-right-color")}} +- {{cssxref("border-right-style")}} +- {{cssxref("border-right-width")}} +- Скорочення {{cssxref("border-right")}} +- {{cssxref("border-top-color")}} +- {{cssxref("border-top-style")}} +- {{cssxref("border-top-width")}} +- Скорочення {{cssxref("border-top")}} +- Скорочення {{cssxref("border-color")}} +- Скорочення {{cssxref("border-style")}} +- Скорочення {{cssxref("border-width")}} +- Скорочення {{cssxref("border")}} + +- {{cssxref("border-collapse")}} + +- {{cssxref("border-bottom-left-radius")}} +- {{cssxref("border-bottom-right-radius")}} +- {{cssxref("border-top-left-radius")}} +- {{cssxref("border-top-right-radius")}} +- Скорочення {{cssxref("border-radius")}} + +- {{cssxref("border-image-outset")}} +- {{cssxref("border-image-repeat")}} +- {{cssxref("border-image-slice")}} +- {{cssxref("border-image-source")}} +- {{cssxref("border-image-width")}} +- Скорочення {{cssxref("border-image")}} + +- {{cssxref("box-shadow")}} + +### Типи даних + +- Перелічений тип {{cssxref("line-style")}} + +## Посібники + +- [Вивчаймо CSS – Фони та межі](/uk/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) + - : Пояснює, як реалізувати декоративні зображення за допомогою фонових зображень CSS. +- [Застосування кількох фонів](/uk/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds) + - : Пояснює, як задати на елементі один чи більше фонів. +- [Зміни розмірів зображень тла](/uk/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images) + - : Описує, як змінити розмір та повторюваність зображень тла. +- [Вивчаймо CSS – Рамкова модель](/uk/docs/Learn/CSS/Building_blocks/The_box_model) + - : Пояснює, як межі, поруч з іншими властивостями рамкової моделі, впливають на рамкову модель CSS. +- [Застосування градієнтів CSS](/uk/docs/Web/CSS/CSS_images/Using_CSS_gradients) + - : Пояснює, як створювати градієнтові фонові зображення CSS. + +## Споріднені концепції + +- Властивість {{cssxref("border-block-end-color")}} +- Властивість {{cssxref("border-block-start-color")}} +- Властивість {{cssxref("border-inline-end-color")}} +- Властивість {{cssxref("border-inline-start-color")}} +- Властивість {{cssxref("border-block-end-style")}} +- Властивість {{cssxref("border-block-start-style")}} +- Властивість {{cssxref("border-inline-end-style")}} +- Властивість {{cssxref("border-inline-start-style")}} +- Властивість {{cssxref("border-block-end-width")}} +- Властивість {{cssxref("border-block-start-width")}} +- Властивість {{cssxref("border-inline-end-width")}} +- Властивість {{cssxref("border-inline-start-width")}} + +- Властивість {{cssxref("border-start-start-radius")}} +- Властивість {{cssxref("border-start-end-radius")}} +- Властивість {{cssxref("border-end-start-radius")}} +- Властивість {{cssxref("border-end-end-radius")}} + +- Властивість {{cssxref("box-sizing")}} +- Властивість {{cssxref("box-decoration-break")}} +- Властивість {{cssxref("text-shadow")}} + +- Функція CSS {{cssxref("url", "url()")}} +- Тип даних [``](/uk/docs/Web/CSS/color) +- Тип даних [``](/uk/docs/Web/CSS/image) +- Тип даних [``](/uk/docs/Web/CSS/position) + +- Ключове слово [`currentcolor`](/uk/docs/Web/CSS/color_value#kliuchove-slovo-currentcolor) keyword + +## Специфікації + +{{Specifications}} + +## Дивіться також + +- Інтерактивні інструменти, що дають змогу візуально створювати межові зображення, закруглені кути та рамкові тіні: + - [Генератор border-image](/uk/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator) + - [Генератор border-radius](/uk/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator) + - [Генератор box-shadow](/uk/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator) +- [Застосування кольору до елементів HTML за допомогою CSS](/uk/docs/Web/CSS/CSS_colors/Applying_color), включаючи межі. +- Фільтрувальна функція [`drop-shadow()`](/uk/docs/Web/CSS/filter-function/drop-shadow), що застосовує до вихідного зображення ефект тіні. Вона використовується властивостями {{cssxref("filter")}} та {{cssxref("backdrop-filter")}}. diff --git a/files/uk/web/css/css_backgrounds_and_borders/resizing_background_images/index.md b/files/uk/web/css/css_backgrounds_and_borders/resizing_background_images/index.md index 94f42a8374..dbd3e9796a 100644 --- a/files/uk/web/css/css_backgrounds_and_borders/resizing_background_images/index.md +++ b/files/uk/web/css/css_backgrounds_and_borders/resizing_background_images/index.md @@ -45,7 +45,7 @@ background-size: 300px 150px; Результат має наступний вигляд: -![Розтягнений новий логотип Firefox](stretched_firefox_logo.png) +![Розтягнений логотип Firefox](stretched_firefox_logo.png) ## Масштабування зображення в бік збільшення @@ -67,11 +67,11 @@ background-size: 300px 150px; Як можна спостерігати, CSS насправді по суті ідентичний, окрім імені файлу зображення. -## Особливі значення: "contain" і "cover" +## Особливі значення: `contain` і `cover` -Окрім значень {{cssxref("<length>")}}, властивість CSS {{cssxref("background-size")}} пропонує два особливі значення розміру, `contain` і `cover`. Погляньмо на них. +На додачу до значень {{cssxref("<length>")}}, властивість CSS {{cssxref("background-size")}} пропонує два особливі значення розміру, `contain` і `cover`. Погляньмо на них. -### contain +### `contain` Значення `contain` задає те, що, незалежно від розміру контейнерного блока, зображення тла повинно масштабуватися так, щоб кожна сторона була настільки великою, наскільки це можливо, але не більшою за довжину відповідної сторони контейнера. Спробуйте змінити розміри прикладу нижче, аби побачити це в дії. @@ -92,7 +92,6 @@ background-size: 300px 150px; width: 160px; height: 160px; border: 2px solid; - color: pink; resize: both; overflow: scroll; } @@ -102,7 +101,7 @@ background-size: 300px 150px; {{EmbedLiveSample('contain', 250, 250)}} -### cover +### `cover` Значення `cover` задає те, що зображення тла повинно калібруватися так, щоб воно було настільки малим, наскільки можливо, щоб при цьому обидва розміри були більшими чи рівними розмірам відповідних сторін контейнера. Спробуйте змінити розміри прикладу нижче, аби побачити це в дії. @@ -123,7 +122,6 @@ background-size: 300px 150px; width: 160px; height: 160px; border: 2px solid; - color: pink; resize: both; overflow: scroll; } diff --git a/files/uk/web/css/css_box_model/index.md b/files/uk/web/css/css_box_model/index.md new file mode 100644 index 0000000000..c564d76e0f --- /dev/null +++ b/files/uk/web/css/css_box_model/index.md @@ -0,0 +1,78 @@ +--- +title: Рамкова модель CSS +slug: Web/CSS/CSS_box_model +page-type: css-module +spec-urls: https://drafts.csswg.org/css-box/ +--- + +{{CSSRef}} + +Модуль **Рамкової моделі CSS** визначає прямокутні рамки, включно з їхніми внутрішніми та зовнішніми відступами, що створюються для елементів і компонуються згідно з [моделлю візуального форматування](/uk/docs/Web/CSS/Visual_formatting_model). + +## Огляд рамкової моделі + +Рамка в CSS складається з області вмісту, в якій виводяться текст, зображення чи інші елементи HTML. Навколо неї необов'язково присутній внутрішній відступ, межа, а також зовнішній відступ, усе це з одного або більше боків. Рамкова модель описує те, як ці елементи працюють разом, щоб створити рамку, яка відображається за допомогою CSS. Щоб дізнатися більше про це, прочитайте [Вступ до рамкової моделі CSS](/uk/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model). + +### Ключові слова країв рамки + +Специфікація Рамкової моделі визначає набір ключових слів, що вказують на краї кожної частини рамки, які використовуються в CSS як значення – ключові слова, в тому числі як значення властивості {{cssxref("box-sizing")}}, для керування тим, як рамкова модель обчислює свій розмір. + +- `content-box` + - : Край області вмісту рамки. +- `padding-box` + - : Край внутрішніх відступів рамки, а якщо з цього боку внутрішнього вмісту немає, то це те саме, що й `content-box`. +- `border-box` + - : Край меж рамки, а якщо з цього боку межі немає, то це те саме, що й `padding-box`. +- `margin-box` + - : Край зовнішніх полів рамки, а якщо з цього боку зовнішнього поля немає, то це те саме, що й `border-box`. +- `stroke-box` + - : У SVG позначає контурну рамку, а в CSS працює як `content-box`. +- `view-box` + - : У SVG позначає вихідну рамку найближчого елемента області перегляду SVG, яка є прямокутником з шириною та висотою початкової користувацької координатної системи SVG, встановленої атрибутом {{svgattr("viewBox")}} для цього елемента. У CSS працює як `border-box`. + +## Довідка + +> **Примітка:** Ця специфікація визначає фізичні властивості внутрішніх і зовнішніх відступів. Потокові властивості, що стосуються напрямку тексту, визначені в [Логічних властивостях і значеннях](/uk/docs/Web/CSS/CSS_logical_properties_and_values). + +### Властивості для контролю зовнішніх відступів рамки + +Зовнішні відступи оточують край межі рамки та створюють проміжки між рамками. + +- {{CSSxRef("margin")}} +- {{CSSxRef("margin-bottom")}} +- {{CSSxRef("margin-left")}} +- {{CSSxRef("margin-right")}} +- {{CSSxRef("margin-top")}} +- {{CSSxRef("margin-trim")}} {{Experimental_Inline}} + +### Властивості для контролю внутрішніх відступів рамки + +Внутрішні відступи додаються між краєм вмісту та краєм межі рамки. + +- {{CSSxRef("padding")}} +- {{CSSxRef("padding-bottom")}} +- {{CSSxRef("padding-left")}} +- {{CSSxRef("padding-right")}} +- {{CSSxRef("padding-top")}} + +### Інші властивості + +Є інші властивості, що стосуються рамкової моделі, але визначені в інших місцях. + +- [Межі](/uk/docs/Web/CSS/CSS_backgrounds_and_borders) + - : Властивості меж задають товщину межі, її стиль накреслення та колір. +- [Переповнення](/uk/docs/Web/CSS/overflow) + - : Контролює те, що відбувається, коли вмісту занадто багато, щоб поміститися в рамку. + +## Посібники + +- [Вступ у Рамкову модель CSS](/uk/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) + - : Пояснює одну з фундаментальних концепцій CSS – рамкову модель. Ця модель визначає, як CSS компонує елементи, включно з їхніми областями вмісту, внутрішніми відступами, межами та зовнішніми відступами. +- [Опанування перекриття зовнішніх полів](/uk/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) + - : Іноді два сусідні зовнішні відступи перекриваються. Ця стаття описує правила, що керують тим, коли та чому це відбувається, і як це контролювати. +- [Модель візуального форматування](/uk/docs/Web/CSS/Visual_formatting_model) + - : Пояснює модель візуального форматування. + +## Специфікації + +{{Specifications}} diff --git a/files/uk/web/css/css_media_queries/index.md b/files/uk/web/css/css_media_queries/index.md new file mode 100644 index 0000000000..6e5293ed79 --- /dev/null +++ b/files/uk/web/css/css_media_queries/index.md @@ -0,0 +1,62 @@ +--- +title: Медіазапити CSS +slug: Web/CSS/CSS_media_queries +page-type: css-module +spec-urls: + - https://drafts.csswg.org/mediaqueries/ + - https://drafts.csswg.org/css-conditional/ +--- + +{{CSSRef}} + +**Медіазапити CSS** – це ключова компонента [чуйного дизайну](/uk/docs/Learn/CSS/CSS_layout/Responsive_Design), який дає змогу застосовувати стилі CSS в залежності від наявності або значень характеристик пристрою. + +Заведено застосовувати медіазапит на основі розміру {{Glossary("viewport", "області перегляду")}}, щоб можна було приймати рішення щодо компонування для пристроїв з різними розмірами екранів. Наприклад, може бути менший розмір шрифту для менших екранів, збільшити внутрішній відступ між абзацами, коли сторінка переглядається в портретному режимі, або збільшити розмір кнопок на сенсорних екранах. + +![Ноутбук і мобільний пристрій з різними розмірами області перегляду, які можна перевіряти за допомогою медіазапитів, і можна спостерігати за тим, як вміст компонується по-різному.](media-queries.svg) + +У [CSS](/uk/docs/Web/CSS) можна використати [директиву](/uk/docs/Web/CSS/At-rule) {{cssxref("@media")}}, щоб умовно застосувати частину списку стилів на основі результату медіазапиту. +Щоб умовно застосувати цілий список стилів, слід використати {{cssxref("@import")}}. + +При розробці компонентів HTML для багаторазового використання також можна скористатися [контейнерними запитами](/uk/docs/Web/CSS/CSS_container_queries), які дають змогу застосовувати стилі на основі розміру контейнерного елемента, а не області перегляду чи інших характеристик пристрою. + +### Медіазапити в HTML + +В [HTML](/uk/docs/Web/HTML) медіазапити можуть застосовуватися до різних елементів: + +- В атрибуті [`media`](/uk/docs/Web/HTML/Element/link#media) елемента {{HTMLElement("link")}} вони визначають засоби візуалізації, до яких повинен застосовуватися сполучений ресурс (зазвичай CSS). +- В атрибуті [`media`](/uk/docs/Web/HTML/Element/source#media) елемента {{HTMLElement("source")}} вони визначають засоби візуалізації, до яких повинен застосовуватися вихідний код. (Це діє лише всередині елементів {{HTMLElement("picture")}}.) +- В атрибуті [`media`](/uk/docs/Web/HTML/Element/style#media) елемента {{HTMLElement("style")}} вони визначають засоби візуалізації, до яких стиль повинен бути застосований. + +### Медіазапити в JavaScript + +У [JavaScript](/uk/docs/Web/JavaScript) можна скористатися методом {{domxref("Window.matchMedia()")}}, щоб перевірити вікно на відповідність медіазапитові. +Також можна використати {{domxref("MediaQueryList.addListener()")}}, щоб отримати сповіщення про зміну стану запиту. +З такою функціональністю сайт або застосунок може реагувати на зміни в конфігурації, орієнтації чи стані пристрою. + +Дізнатися більше про програмне використання медіазапитів можна на сторінці [Перевірка медіазапитів](/uk/docs/Web/CSS/CSS_media_queries/Testing_media_queries). + +## Довідка + +### Директиви + +- {{cssxref("@import")}} +- {{cssxref("@media")}} + +## Посібники + +- [Застосування медіазапитів](/uk/docs/Web/CSS/CSS_media_queries/Using_media_queries) + - : Знайомить з медіазапитом, їхнім синтаксисом, а також операторами та можливостями медіа, що використовуються для конструювання виразів медіазапитів. +- [Перевірка медіазапитів програмно](/uk/docs/Web/CSS/CSS_media_queries/Testing_media_queries) + - : Описує, як використовувати медіазапити в коді JavaScript, щоб з'ясовувати стан пристрою, а також задавати слухачів, що сповіщають код, коли результати медіазапитів змінюються (наприклад, коли користувач обертає екран або змінює розмір вікна браузера). +- [Використання медіазапитів заради доступності](/uk/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility) + - : Дізнайтеся, як Медіазапити можуть допомогти розуміти ваш вебсайт краще. + +## Специфікації + +{{Specifications}} + +## Дивіться також + +- [Контейнерні запити](/uk/docs/Web/CSS/CSS_container_queries) +- Використовуйте {{cssxref("@supports")}}, щоб застосовувати стилі, що залежать від браузерної підтримки різних технологій CSS. diff --git a/files/uk/web/css/css_media_queries/media-queries.svg b/files/uk/web/css/css_media_queries/media-queries.svg new file mode 100644 index 0000000000..5040a4de68 --- /dev/null +++ b/files/uk/web/css/css_media_queries/media-queries.svg @@ -0,0 +1,118 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Lorem ipsum dolor sit amet, consectetur adipisicing + elit, sed do eiusmod tempor incididunt ut labore et + dolore magna aliqua. + Praesent aliquam, enim at fermentum mollis, ligula + massa adipiscing nisl, ac euismod nibh nisl eu lectus. + Fusce vulputate sem at sapien. Vivamus leo + + + + Lorem ipsum dolor sit amet, + consectetur adipisicing elit, sed  + do eiusmod tempor incididunt ut  + labore et dolore magna aliqua. + Praesent aliquam, enim at + fermentum mollis, ligula massa + adipiscing nisl, ac euismod nibh + nisl eu lectus. Fusce vulputate + sem at sapien. Vivamus leo + + + + + + Ширина області перегляду + + + + + + Ширина області перегляду + + + + + + Висота + області + перегляду + + + + + + Висота + області + перегляду + + + + + + + + Заголовок + + + + Заголовок + + \ No newline at end of file diff --git a/files/uk/web/css/css_text/index.md b/files/uk/web/css/css_text/index.md new file mode 100644 index 0000000000..1d30cec72b --- /dev/null +++ b/files/uk/web/css/css_text/index.md @@ -0,0 +1,40 @@ +--- +title: Текст CSS +slug: Web/CSS/CSS_text +page-type: css-module +spec-urls: + - https://drafts.csswg.org/css-logical/ + - https://drafts.csswg.org/css-text/ + - https://drafts.csswg.org/css-text-4/ +--- + +{{CSSRef}} + +Модуль **Тексту CSS** визначає те, як виконувати операції над текстом, як то розриви рядків, шикування та вирівнювання, обробку пробілів і перетворення тексту. + +## Довідка + +### Властивості + +- {{cssxref("hanging-punctuation")}} +- {{cssxref("hyphenate-limit-chars")}} +- {{cssxref("hyphens")}} +- {{cssxref("letter-spacing")}} +- {{cssxref("line-break")}} +- {{cssxref("overflow-wrap")}} +- {{cssxref("tab-size")}} +- {{cssxref("text-align")}} +- {{cssxref("text-align-last")}} +- {{cssxref("text-indent")}} +- {{cssxref("text-justify")}} +- {{cssxref("text-size-adjust")}} +- {{cssxref("text-transform")}} +- {{cssxref("text-wrap")}} {{experimental_inline}} +- {{cssxref("white-space")}} +- {{cssxref("white-space-collapse")}} {{experimental_inline}} +- {{cssxref("word-break")}} +- {{cssxref("word-spacing")}} + +## Специфікації + +{{Specifications}} diff --git a/files/uk/web/css/css_text/wrapping_breaking_text/index.md b/files/uk/web/css/css_text/wrapping_breaking_text/index.md index 69053fe20f..56b2021804 100644 --- a/files/uk/web/css/css_text/wrapping_breaking_text/index.md +++ b/files/uk/web/css/css_text/wrapping_breaking_text/index.md @@ -54,9 +54,9 @@ CSS покаже переповнення саме так, тому що яка {{EmbedGHLiveSample("css-examples/css-text/hyphens.html", '100%', 600)}} -Також можна використати властивість {{cssxref("hyphenate-character")}} – для застосування рядка за власним вибором замість символу дефіса в кінці рядка (перед дефісним розривом рядка). +Також можна вжити властивість {{cssxref("hyphenate-character")}}, щоб в кінці рядка (перед розривом) використовувався вибраний рядок, а не усталений для конкретної мови символ дефіса. Значення `auto` обирає правильне значення для позначення розриву слова згідно з типографічними поняттями поточної мови вмісту. -Ця властивість також приймає значення `auto`, котре вибере коректне значення для позначення розриву рядка посередині слова, згідно з типографськими поняттями поточної мови вмісту. +CSS надає додатковий контроль над дефісами: властивість {{cssxref("hyphenate-limit-chars")}} може бути використана для задання мінімальної довжини слова, яка дозволяє додавання дефіса, а також мінімальної кількості символів перед і після дефіса. ## Елемент `` @@ -72,5 +72,8 @@ CSS покаже переповнення саме так, тому що яка - Властивість CSS {{cssxref("word-break")}} - Властивість CSS {{cssxref("overflow-wrap")}} - Властивість CSS {{cssxref("white-space")}} +- Властивість CSS {{cssxref("text-wrap")}} - Властивість CSS {{cssxref("hyphens")}} +- Властивість CSS {{cssxref("hyphenate-character")}} +- Властивість CSS {{cssxref("hyphenate-limit-chars")}} - [Переповнювання і втрата даних у CSS](https://www.smashingmagazine.com/2019/09/overflow-data-loss-css/) diff --git a/files/uk/web/css/css_transitions/index.md b/files/uk/web/css/css_transitions/index.md new file mode 100644 index 0000000000..f9ca64b951 --- /dev/null +++ b/files/uk/web/css/css_transitions/index.md @@ -0,0 +1,37 @@ +--- +title: Переходи CSS +slug: Web/CSS/CSS_transitions +page-type: css-module +spec-urls: https://drafts.csswg.org/css-transitions/ +--- + +{{CSSRef}} + +Модуль **Переходів CSS** дає змогу створювати поступові переходи між значеннями певних властивостей CSS. Логіку цих переходів можна контролювати, задаючи функцію згладжування, тривалість та інші атрибути. + +## Довідка + +### Властивості + +- {{cssxref("transition")}} +- {{cssxref("transition-delay")}} +- {{cssxref("transition-duration")}} +- {{cssxref("transition-property")}} +- {{cssxref("transition-timing-function")}} + +### Директиви + +- {{cssxref("@starting-style")}} + +## Посібники + +- [Застосування Переходів CSS](/uk/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) + - : Покроковий підручник про те, як створювати переходи за допомогою CSS. Ця стаття описує кожну важливу властивість CSS і пояснює, як вони взаємодіють між собою. + +## Специфікації + +{{Specifications}} + +## Дивіться також + +- Споріднені з Переходами CSS [Анімації CSS](/uk/docs/Web/CSS/CSS_animations) пропонують більш детальне керування анімованими властивостями. diff --git a/files/uk/web/css/flex-basis/firefox-flex-basis.png b/files/uk/web/css/flex-basis/firefox-flex-basis.png new file mode 100644 index 0000000000..67eed0a641 Binary files /dev/null and b/files/uk/web/css/flex-basis/firefox-flex-basis.png differ diff --git a/files/uk/web/css/flex-basis/index.md b/files/uk/web/css/flex-basis/index.md new file mode 100644 index 0000000000..3eca24d345 --- /dev/null +++ b/files/uk/web/css/flex-basis/index.md @@ -0,0 +1,192 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +page-type: css-property +browser-compat: css.properties.flex-basis +--- + +{{CSSRef}} + +Властивість [CSS](/uk/docs/Web/CSS) **`flex-basis`** (основа гнучкості) задає початкову основну розмірність гнучкого елемента. Вона задає розмір рамки вмісту, якщо у {{Cssxref("box-sizing")}} не задано щось інше. + +{{EmbedInteractiveExample("pages/css/flex-basis.html")}} + +У цьому прикладі як властивість {{cssxref("flex-grow")}}, так і властивість {{cssxref("flex-shrink")}} мають значення `1` на всіх трьох елементах, що означає те, що гнучкі елементи можуть збільшуватися і зменшуватися відносно початкового значення `flex-basis`. + +Це демо потім змінює `flex-basis` на першому елементі. Він буде збільшуватися і зменшуватися відносно свого flex-basis. Це означає, наприклад, що коли `flex-basis` першого елемента дорівнює `200px`, він спочатку буде мати розмір 200px, а потім зменшиться, щоб вміститися в доступний простір, при цьому інші елементи матимуть розмір, що не менше `min-content`. + +Зображення нижче демонструє, як [Flexbox Inspector](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_flexbox_layouts/index.html) Firefox допомагає зрозуміти розмір елементів: + +![ Flexbox Inspector Firefox демонструє розмір елемента, коли він зменшився.](firefox-flex-basis.png) + +> **Примітка:** Коли для елемента задано і `flex-basis` (зі значенням, відмінним від `auto`), і `width` (або `height` у випадку `flex-direction: column`), `flex-basis` має пріоритет. + +## Синтаксис + +```css +/* Задати <'width'> */ +flex-basis: 10em; +flex-basis: 3px; +flex-basis: 50%; +flex-basis: auto; + +/* Ключові слова природного розміру */ +flex-basis: max-content; +flex-basis: min-content; +flex-basis: fit-content; + +/* Задати розмір автоматично на основі вмісту гнучкого елемента */ +flex-basis: content; + +/* Глобальні значення */ +flex-basis: inherit; +flex-basis: initial; +flex-basis: revert; +flex-basis: revert-layer; +flex-basis: unset; +``` + +Властивість `flex-basis` задається або ключовим словом `content`, або значенням `<'width'>`. + +### Значення + +- `<'width'>` + + - : Будь-яка з наступних одиниць вимірювання: + - {{cssxref("<length>")}} задає абсолютне значення + - {{cssxref("<percentage>")}} задає відсоткове значення відносно ширини або висоти області вмісту контейнерного блока + - `auto` використовує значення [width](https://drafts.csswg.org/css2/#the-width-property) при горизонтальному напрямку письма і значення властивості {{cssxref("height")}} при вертикальному напрямку письма; коли відповідне значення також є `auto`, використовується значення `content` + - `max-content` задає бажану природну ширину + - `min-content` задає мінімальну природну ширину + - `fit-content` задає максимально можливий розмір області вмісту контейнерного блока, обмежену значеннями `min-content` і `max-content`, що обчислюється на основі вмісту поточного елемента + +- `content` + + - : Вказує на автоматичне визначення розміру на основі вмісту гнучкого елемента. + + > **Примітка:** Цього значення не було в Компонуванні гнучких рамок при початковому випуску, тому деякі старі реалізації його не підтримують. Рівносильного ефекту можна досягти, використовуючи `auto` разом із головним розміром ([width](https://drafts.csswg.org/css2/#the-width-property) або [height](https://drafts.csswg.org/css2/#the-height-property)) зі значенням `auto`. + > + > - Спершу `flex-basis:auto` означало "дивись на мою властивість `width` або `height`". + > - Потім `flex-basis:auto` стало означати автоматичне визначення розміру, і додали ключове слово "main-size" на позначення "дивись на мою властивість `width` або `height`". Його реалізували у [ваді Firefox 1032922](https://bugzil.la/1032922). + > - Потім ці зміни були відкинуті у [ваді Firefox 1093316](https://bugzil.la/1093316), тому `auto` знову означає "дивись на мою властивість `width` або `height`"; і вводиться нове ключове слово `content` для запуску автоматичного визначення розміру. ([Вада Firefox 1105111](https://bugzil.la/1105111) охоплює додавання цього ключового слова). + +## Формальне визначення + +{{cssinfo}} + +## Формальний синтаксис + +{{csssyntax}} + +## Приклади + +### Задання початкових розмірів гнучких елементів + +#### HTML + +```html +
    +
  • 1: перевірка flex-basis
    • +
  • 2: перевірка flex-basis
    • +
  • 3: перевірка flex-basis
    • +
  • 4: перевірка flex-basis
    • +
  • 5: перевірка flex-basis
    • +
+ +
    +
  • 6: перевірка flex-basis
    • +
+``` + +#### CSS + +```css +.container { + font-family: arial, sans-serif; + margin: 0; + padding: 0; + list-style-type: none; + display: flex; + flex-wrap: wrap; +} + +.flex { + background: #6ab6d8; + padding: 10px; + margin-bottom: 50px; + border: 3px solid #2e86bb; + color: white; + font-size: 14px; + text-align: center; + position: relative; +} + +.flex::after { + position: absolute; + z-index: 1; + left: 0; + top: 100%; + margin-top: 10px; + width: 100%; + color: #333; + font-size: 12px; +} + +.flex1 { + flex-basis: auto; +} + +.flex1::after { + content: "auto"; +} + +.flex2 { + flex-basis: max-content; +} + +.flex2::after { + content: "max-content"; +} + +.flex3 { + flex-basis: min-content; +} + +.flex3::after { + content: "min-content"; +} + +.flex4 { + flex-basis: fit-content; +} + +.flex4::after { + content: "fit-content"; +} + +.flex5 { + flex-basis: content; +} + +.flex5::after { + content: "content"; +} +``` + +#### Результати + +{{EmbedLiveSample('zadannia-pochatkovykh-rozmiriv-hnuchkykh-elementiv', '', '360')}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- Посібник із Флексбоксу CSS – _[Базові концепції Флексбоксу](/uk/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- Посібник із Флексбоксу CSS – _[Контроль співвідношень між гнучкими елементами за головною віссю](/uk/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ +- {{cssxref("width")}} diff --git a/files/uk/web/css/flex-grow/index.md b/files/uk/web/css/flex-grow/index.md new file mode 100644 index 0000000000..f4f813d70d --- /dev/null +++ b/files/uk/web/css/flex-grow/index.md @@ -0,0 +1,117 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +page-type: css-property +browser-compat: css.properties.flex-grow +--- + +{{CSSRef}} + +Властивість [CSS](/uk/docs/Web/CSS) **`flex-grow`** (флексбокс зростання) задає множник гнучкого зростання, який впливає на те, яка частина вільного простору контейнера буде віддана [головному розмірові](https://www.w3.org/TR/css-flexbox/#main-size) цього елемента. + +Коли головний розмір гнучкого контейнера перевищує суму головних розмірів гнучких елементів, надлишок простору розподіляється між гнучкими елементами, причому зростання кожного елемента пропорційно його множнику зростання відносно загальної суми множників зростання всіх елементів контейнера. + +{{EmbedInteractiveExample("pages/css/flex-grow.html")}} + +## Синтаксис + +```css +/* Значення */ +flex-grow: 3; +flex-grow: 0.6; + +/* Глобальні значення */ +flex-grow: inherit; +flex-grow: initial; +flex-grow: revert; +flex-grow: revert-layer; +flex-grow: unset; +``` + +Властивість `flex-grow` задається у вигляді єдиного значення ``. + +### Значення + +- `` + - : Дивіться {{cssxref("<number>")}}. Від'ємні значення є недійсними. Усталено – 0. + +## Опис + +Ця властивість задає те, скільки вільного простору контейнера буде віддано цьому гнучкому елементу (множник зростання гнучкого елемента). + +[Головний розмір](https://www.w3.org/TR/css-flexbox/#main-size) – це або ширина, або висота елемента, залежно від значення {{cssxref("flex-direction")}}. + +Вільний простір - це розмір гнучкого контейнера мінус розмір всіх гнучких елементів разом. Якщо у всіх сусідніх елементів один і той же множник зростання, то всі елементи отримають однакові частки вільного простору, а інакше він розподіляється відповідно до співвідношення, визначеного різними множниками зростання гнучких елементів. + +Властивість `flex-grow` використовується поруч з іншими гнучкими властивостями {{cssxref("flex-shrink")}} та {{cssxref("flex-basis")}}, і зазвичай визначається за допомогою скорочення {{cssxref("flex")}}, щоб забезпечити задання всіх значень. + +## Формальне визначення + +{{cssinfo}} + +## Формальний синтаксис + +{{csssyntax}} + +## Приклади + +### Задання множника зростання гнучкого елемента + +У цьому прикладі сумарний множник зростання 8 розподіляється між 6 гнучкими елементами, що означає, що кожен множник зростання становить 12,5% від вільного простору. + +#### HTML + +```html +

Це Flex-Grow

+
А, Б, В і Г – flex-grow:1 . Ґ і Д – flex-grow:2 .
+
+
А
+
Б
+
В
+
Г
+
Ґ
+
Д
+
+``` + +#### CSS + +```css +#content { + display: flex; + + justify-content: space-around; + flex-flow: row wrap; + align-items: stretch; +} + +.small { + flex-grow: 1; + border: 3px solid rgba(0, 0, 0, 0.2); +} + +.double { + flex-grow: 2; + border: 3px solid rgba(0, 0, 0, 0.2); +} +``` + +#### Результат + +{{EmbedLiveSample('zadannia-mnozhnyka-zrostannia-hnuchkoho-elementa')}} + +Коли шість гнучких елементів розподіляються вздовж головної осі контейнера, то якщо сума головного вмісту цих гнучких елементів менша за довжину головної осі контейнера, то надлишковий простір розподіляється між гнучкими елементами, причому А, Б, В і Г отримують по 12,5% вільного простору, а Ґ і Д – по 25%. + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- Посібник зі Флексбоксу CSS: _[Базові концепції флексбоксу](/uk/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)_ +- Посібник зі Флексбоксу CSS: _[Контроль співвідношень гнучких елементів на головній осі](/uk/docs/Web/CSS/CSS_flexible_box_layout/Controlling_ratios_of_flex_items_along_the_main_axis)_ +- Стаття [`flex-grow` – дивний. Або ні?](https://css-tricks.com/flex-grow-is-weird/) від Мануеля Матузовича на CSS-Tricks, яка ілюструє те, як працює flex-grow diff --git a/files/uk/web/css/font-synthesis-position/index.md b/files/uk/web/css/font-synthesis-position/index.md new file mode 100644 index 0000000000..08c61e6aa8 --- /dev/null +++ b/files/uk/web/css/font-synthesis-position/index.md @@ -0,0 +1,103 @@ +--- +title: font-synthesis-position +slug: Web/CSS/font-synthesis-position +page-type: css-property +browser-compat: css.properties.font-synthesis-position +--- + +{{CSSRef}} + +Властивість [CSS](/uk/docs/Web/CSS) **`font-synthesis-position`** (шрифт, синтез позиційних) дає змогу задати те, чи повинен браузер синтезувати підрядкові та надрядкові "позиційні" гарнітури, коли вони відсутні в сімействі шрифтів, використовуючи {{cssxref("font-variant-position")}} для задання позицій. + +Властивість **`font-synthesis-position`** не діє, коли використовуються елементи {{htmlelement("sup")}} і {{htmlelement("sub")}}. + +Нерідко зручно використовувати властивість-скорочення {{cssxref("font-synthesis")}}, щоб керувати всіма значеннями синтезу гарнітур. + +## Синтаксис + +```css +/* Значення – ключові слова */ +font-synthesis-position: auto; +font-synthesis-position: none; + +/* Глобальні значення */ +font-synthesis-position: inherit; +font-synthesis-position: initial; +font-synthesis-position: revert; +font-synthesis-position: revert-layer; +font-synthesis-position: unset; +``` + +### Значення + +- `auto` + - : Позначає те, що відсутня позиційна гарнітура може бути синтезована браузером, якщо це потрібно. +- `none` + - : Позначає те, що синтез відсутньої позиційної гарнітури браузером – не дозволений. + +## Формальне визначення + +{{cssinfo}} + +## Формальний синтаксис + +{{csssyntax}} + +## Приклади + +### Вимикання синтезу позиційних гарнітур + +Цей приклад демонструє вимикання синтезу браузером надрядкової та підрядкової гарнітур для шрифту `Montserrat`. + +#### HTML + +```html +

+ Ось усталені гарнітури: позиційна надрядкова, + позиційна підрядкова, груба та + похила. +

+ +

+ Позиційні гарнітури, надрядкова та + підрядкова, тут вимкнені, але не гарнітури + груба та похила (у браузерах, що підтримують + font-synthesis-position). +

+``` + +#### CSS + +```css +@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap"); + +* { + font-family: "Montserrat", sans-serif; +} +.super { + font-variant-position: super; +} +.sub { + font-variant-position: sub; +} +.no-syn { + font-synthesis-position: none; +} +``` + +#### Результат + +{{EmbedLiveSample('vymykannia-syntezu-pozytsiinykh-harnitur', '', '100')}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- Скорочення {{cssxref("font-synthesis")}}, {{cssxref("font-synthesis-style")}}, {{cssxref("font-synthesis-weight")}} +- {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-weight")}} diff --git a/files/uk/web/css/font/index.md b/files/uk/web/css/font/index.md new file mode 100644 index 0000000000..380c4abd37 --- /dev/null +++ b/files/uk/web/css/font/index.md @@ -0,0 +1,508 @@ +--- +title: font +slug: Web/CSS/font +page-type: css-shorthand-property +browser-compat: css.properties.font +--- + +{{CSSRef}} + +[Властивість-скорочення](/uk/docs/Web/CSS/Shorthand_properties) CSS **`font`** (шрифт) задає всі різноманітні властивості шрифту елемента. Як інший варіант, вона може задавати елементові системний шрифт. + +{{EmbedInteractiveExample("pages/css/font.html")}} + +Як і в випадку будь-якої властивості-скорочення, будь-яке окреме значення, що не задано, отримує відповідне собі початкове значення (можливо, відкидаючи значення, раніше задані за допомогою нескорочених властивостей). Хоча властивості {{cssxref("font-size-adjust")}} та {{cssxref("font-kerning")}} не можна задати безпосередньо за допомогою `font`, вони також скидаються до своїх початкових значень. + +## Властивості-складові + +Ця властивість є скороченням наступних властивостей CSS: + +- {{cssxref("font-family")}} +- {{cssxref("font-size")}} +- {{cssxref("font-stretch")}} +- {{cssxref("font-style")}} +- {{cssxref("font-variant")}} +- {{cssxref("font-weight")}} +- {{cssxref("line-height")}} + +## Синтаксис + +```css-nolint +/* font-size font-family */ +font: 1.2em "Fira Sans", sans-serif; + +/* font-size/line height font-family */ +font: 1.2em/2 "Fira Sans", sans-serif; + +/* font-style font-weight font-size font-family */ +font: italic bold 1.2em "Fira Sans", sans-serif; + +/* font-stretch font-variant font-size font-family */ +font: ultra-condensed small-caps 1.2em "Fira Sans", sans-serif; + +/* системний шрифт */ +font: caption; +``` + +Властивість `font` може задаватися або як одне ключове слово, що вказує на системний шрифт, або як скорочення різних властивостей, що стосуються шрифту. + +Якщо `font` задано як системне ключове слово, то це повинно буде одне з цих слів: `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar`. + +Якщо `font` задано як скорочення декількох властивостей, що стосуються шрифту, то: + +- значення повинно вміщати значення для: + + - {{cssxref("<font-size>")}} + - {{cssxref("<font-family>")}} + +- а також, необов'язково: + + - {{cssxref("<font-style>")}} + - {{cssxref("<font-variant>")}} + - {{cssxref("<font-weight>")}} + - {{cssxref("<font-stretch>")}} + - {{cssxref("<line-height>")}} + +- `font-style`, `font-variant` і `font-weight` повинні стояти перед `font-size` +- `font-variant` може задавати лише значення, задані в CSS 2.1, тобто `normal` або `small-caps` +- `font-stretch` може бути лише єдиним значенням – ключовим словом. +- `line-height` повинно стояти зразу після `font-size`, з префіксом "/", наприклад, "`16px/3` +- `font-family` повинно бути останнім заданим значенням. + +### Значення + +- `<'font-style'>` + - : Дивіться властивість CSS {{cssxref("font-style")}}. +- `<'font-variant'>` + - : Дивіться властивість CSS {{cssxref("font-variant")}}. +- `<'font-weight'>` + - : Дивіться властивість CSS {{cssxref("font-weight")}}. +- `<'font-stretch'>` + - : Дивіться властивість CSS {{cssxref("font-stretch")}}. +- `<'font-size'>` + - : Дивіться властивість CSS {{cssxref("font-size")}}. +- `<'line-height'>` + - : Дивіться властивість CSS {{cssxref("line-height")}}. +- `<'font-family'>` + - : Дивіться властивість CSS {{cssxref("font-family")}}. + +#### Значення системних шрифтів + +- `caption` + - : Системний шрифт, що вживається для контрольних елементів з підписами (наприклад, кнопок, спадних списків тощо). +- `icon` + - : Системний шрифт, що вживається для підписів піктограм. +- `menu` + - : Системний шрифт, що вживається в меню (наприклад, у спадних меню та списках меню). +- `message-box` + - : Системний шрифт, що вживається в діалогових віконцях. +- `small-caption` + - : Системний шрифт, що вживається для підписів малих елементів керування. +- `status-bar` + - : Системний шрифт, що вживається в рядках стану вікон. +- Ключові слова системних шрифтів з префіксами + - : Браузери нерідко мають реалізацію іще декількох ключових слів з префіксами – Gecko має `-moz-window`, `-moz-document`, `-moz-desktop`, `-moz-info`, `-moz-dialog`, `-moz-button`, `-moz-pull-down-menu`, `-moz-list` і `-moz-field`. + +## Формальне визначення + +{{CSSInfo}} + +## Формальний синтаксис + +{{CSSSyntax}} + +## Приклади + +### Задання властивостей шрифту + +```css +/* Задати розмір шрифту 12px, висоту рядка 14px. + Задати сімейство шрифту sans-serif */ +p { + font: 12px/14px sans-serif; +} + +/* Задати розмір шрифту на 80% від батьківського елемента + або усталеного значення (якщо батьківський елемент відсутній). + Задати сімейство шрифту sans-serif */ +p { + font: 80% sans-serif; +} + +/* Задати вагу шрифту як грубий, + стиль шрифту як курсив, + розмір шрифту як великий, + сімейство шрифту як serif */ +p { + font: bold italic large serif; +} + +/* Використовувати той же шрифт, що й рядок стану вікна */ +p { + font: status-bar; +} +``` + +### Живий зразок + +```html hidden +

+ Перемикайте радіокнопки нижче, щоб побачити згенероване скорочення та його + дію. +

+
+
+
+ font-style
+ +
+ +
+ +
+ + +
+ +
+ font-variant
+ +
+ +
+ + +
+ +
+ font-weight
+ +
+ +
+ + +
+ +
+ font-size
+ +
+ +
+ + +
+ +
+ line-height
+ +
+ +
+ + +
+
+ +
+ font-family
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+ +
+
font :
+
+
+ font-style
+ optional +
+
+
+ font-variant
+ optional +
+
+
+ font-weight
+ optional +
+
+
+ font-size
+ mandatory +
+
+
+ line-height
+ optional +
+
+ +
+ font-family
+ mandatory +
+
+
+ +
Це текст для прикладу.
+





+``` + +```css hidden +body, +input { + font: 14px arial; + overflow: hidden; +} + +.propInputCont { + float: left; + text-align: center; + margin-right: 5px; + width: 80px; +} + +.setPropCont { + float: left; + margin-right: 5px; + width: 120px; +} + +.propInputs, +.setPropCont { + margin-bottom: 1em; +} + +.curCss { + border: none; + border-bottom: 1px solid black; + text-align: center; + width: 80px; +} + +.mandatory { + border-bottom-color: red; +} + +.cf::before, +.cf::after { + content: " "; + display: table; +} + +.cf::after { + clear: both; +} + +.tar { + width: 40px; + text-align: right; +} +.fontfamily { + display: inline-block; +} +``` + +```js hidden +const textAreas = document.getElementsByClassName("curCss"); + +function getProperties() { + return ( + `${getCheckedValue("font_style")} ` + + `${getCheckedValue("font_variant")} ` + + `${getCheckedValue("font_weight")} ` + + `${getCheckedValue("font_size")}` + + `${getCheckedValue("line_height")} ` + + `${getCheckedValue("font_family")}` + ); +} + +function getCheckedValue(radioName) { + const radios = document.forms[0].elements[radioName]; + for (let i = 0; i < radios.length; i++) { + if (radios[i].checked) { + const curElemName = `input_${radioName}`; + const curElem = document.getElementById(curElemName); + curElem.value = radios[i].value; + + return radios[i].value; + } + } +} + +function setCss() { + injectCss(getProperties()); +} + +function injectCss(cssFragment) { + const old = document.body.getElementsByTagName("style"); + if (old.length > 1) { + old[1].parentElement.removeChild(old[1]); + } + css = document.createElement("style"); + css.textContent = `.fontShortHand{font: ${cssFragment}}`; + document.body.appendChild(css); +} + +setCss(); +``` + +{{EmbedLiveSample('zhyvyi-zrazok','100%', '440px')}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- {{cssxref("font-style")}} +- {{cssxref("font-weight")}} +- [Засади оформлення тексту та шрифту](/uk/docs/Learn/CSS/Styling_text/Fundamentals) diff --git a/files/uk/web/css/gradient/index.md b/files/uk/web/css/gradient/index.md new file mode 100644 index 0000000000..14570fbafc --- /dev/null +++ b/files/uk/web/css/gradient/index.md @@ -0,0 +1,178 @@ +--- +title: +slug: Web/CSS/gradient +page-type: css-type +browser-compat: css.types.image.gradient +--- + +{{CSSRef}} + +[Тип даних](/uk/docs/Web/CSS/CSS_Types) [CSS](/uk/docs/Web/CSS) **``** – це особливий різновид {{cssxref("<image>")}}, що складається з поступового переходу між двома або більше кольорами. + +{{EmbedInteractiveExample("pages/css/type-gradient.html")}} + +Градієнт CSS не має [власних розмірів](/uk/docs/Web/CSS/image#opys); отже, він не має природного чи бажаного розміру, як не має і бажаного співвідношення сторін. Його конкретний розмір відповідає розмірам елемента, до якого він застосовується. + +## Синтаксис + +Тип даних `` визначається одним з функційних типів, перелічених нижче. + +### Лінійний градієнт + +Лінійні градієнти поступово змінюють колір вздовж уявної лінії. Вони породжуються функцією {{cssxref("gradient/linear-gradient", "linear-gradient()")}}. + +### Радіальний градієнт + +Радіальні градієнти поступово змінюють колір від центральної точки (джерела). Вони породжуються функцією {{cssxref("gradient/radial-gradient", "radial-gradient()")}}. + +### Повторювальний градієнт + +Повторювальні градієнти дублюють градієнт стільки разів, скільки потрібно, щоб заповнити задану область. Вони породжуються функціями {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}} та {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}. + +### Конічний градієнт + +Конічні градієнти поступово змінюють колір по колу. Вони породжуються функцією {{cssxref("gradient/conic-gradient", "conic-gradient()")}}. + +## Інтерполяція + +Як і будь-яка інтерполяція за участі кольорів, градієнти обчислюються в кольоровому просторі з альфа-перемноженням. Це запобігає появі неочікуваних відтінків сірого, коли змінюються як колір, так і непрозорість. (Зверніть увагу, що старі браузери можуть не використовувати цю логіку при застосуванні [ключового слова transparent](/uk/docs/Web/CSS/named-color#transparent).) + +## Формальний синтаксис + +{{csssyntax}} + +## Приклади + +### Приклад лінійного градієнта + +Простий лінійний градієнт. + +```html hidden +
Лінійний градієнт
+``` + +```css hidden +div { + width: 240px; + height: 80px; +} +``` + +```css +.linear-gradient { + background: linear-gradient( + to right, + red, + orange, + yellow, + green, + blue, + indigo, + violet + ); +} +``` + +{{EmbedLiveSample('pryklad-liniinoho-hradiienta', 240, 120)}} + +### Приклад радіального градієнта + +Простий радіальний градієнт. + +```html hidden +
Радіальний градієнт
+``` + +```css hidden +div { + width: 240px; + height: 80px; +} +``` + +```css +.radial-gradient { + background: radial-gradient(red, yellow, rgb(30, 144, 255)); +} +``` + +{{EmbedLiveSample('pryklad-radialnoho-hradiienta', 240, 120)}} + +### Приклади повторювальних градієнтів + +Приклади простих повторювальних лінійного та радіального градієнтів. + +```html hidden +
Повторювальний лінійний градієнт
+
+
Повторювальний радіальний градієнт
+``` + +```css hidden +div { + width: 240px; + height: 80px; +} +``` + +```css +.linear-repeat { + background: repeating-linear-gradient( + to top left, + lightpink, + lightpink 5px, + white 5px, + white 10px + ); +} + +.radial-repeat { + background: repeating-radial-gradient( + powderblue, + powderblue 8px, + white 8px, + white 16px + ); +} +``` + +{{EmbedLiveSample('pryklady-povtoriuvalnykh-hradiientiv', 240, 220)}} + +### Приклад конічного градієнта + +Приклад простого конічного градієнта. Зверніть увагу на те, що він поки що не має широкої браузерної підтримки. + +```html hidden +
Конічний градієнт
+``` + +```css hidden +div { + width: 200px; + height: 200px; +} +``` + +```css +.conic-gradient { + background: conic-gradient(lightpink, white, powderblue); +} +``` + +{{EmbedLiveSample('pryklad-konichnoho-hradiienta', 240, 240)}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- [Застосування Градієнтів CSS](/uk/docs/Web/CSS/CSS_images/Using_CSS_gradients) +- Функції градієнтів: {{cssxref("gradient/linear-gradient", "linear-gradient()")}}, {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("gradient/radial-gradient", "radial-gradient()")}}, {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}, {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} +- [Базові типи даних CSS](/uk/docs/Web/CSS/CSS_Types) +- [Одиниці вимірювання та значення CSS](/uk/docs/Web/CSS/CSS_Values_and_Units) +- [Вступ у CSS – Значення та одиниці вимірювання](/uk/docs/Learn/CSS/Building_blocks/Values_and_units) diff --git a/files/uk/web/css/height/index.md b/files/uk/web/css/height/index.md index eb99562d90..6e506200e1 100644 --- a/files/uk/web/css/height/index.md +++ b/files/uk/web/css/height/index.md @@ -27,6 +27,7 @@ height: 75%; /* Значення – ключові слова */ height: max-content; height: min-content; +height: fit-content; height: fit-content(20em); height: auto; @@ -51,8 +52,8 @@ height: unset; - `min-content` (мінімальний вміст) - : Внутрішньо найменша можлива ширина. - `fit-content` (припасувати вміст) - - : Рамки використають доступний простір, але ні в якому разі не вийдуть за межі `max-content` -- `fit-content({{cssxref("<length-percentage>")}})` + - : Використовує доступний простір, але не більше, ніж [max-content](/uk/docs/Web/CSS/max-content), тобто `min(max-content, max(min-content, stretch))`. +- `fit-content({{cssxref("<length-percentage>")}})` {{Experimental_Inline}} - : Використовує формулу fit-content щодо доступного простору, заміненого вказаним аргументом, тобто `min(max-content, max(min-content, ))`. - {{cssxref("clamp", "clamp()")}} - : Дає змогу вибрати середнє значення з діапазону значень між заданими мінімумом та максимумом. diff --git a/files/uk/web/css/length/index.md b/files/uk/web/css/length/index.md index b9c590d0e6..499d8141c2 100644 --- a/files/uk/web/css/length/index.md +++ b/files/uk/web/css/length/index.md @@ -31,7 +31,7 @@ browser-compat: css.types.length > **Примітка:** Ці одиниці, особливо `em` і `rem`, нерідко використовуються для створення масштабованих макетів, котрі зберігають вертикальний ритм сторінки навіть тоді, коли користувач змінює розмір шрифту. -- `cap` {{experimental_inline}} +- `cap` - : Представляє "cap height" – "висоту заголовної літери" (номінальну висоту великих літер) {{Cssxref("font", "шрифту")}} елемента. - `ch` - : Представляє ширину, а точніше – {{Glossary("advance measure", "попередній розмір")}} гліфа `0` (нуля, символу Unicode U+0030) у {{Cssxref("font", "шрифті")}} елемента. diff --git a/files/uk/web/css/position/index.md b/files/uk/web/css/position/index.md index 4a7ebb3bef..87d8bf7ab9 100644 --- a/files/uk/web/css/position/index.md +++ b/files/uk/web/css/position/index.md @@ -56,6 +56,8 @@ position: unset; Це значення завжди створює новий [контекст нагромадження](/uk/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context). Зверніть увагу, що липкий елемент "прилипає" до свого найближчого предка, який має "механізм прокручування" (утворений встановленням властивості `overflow` у значення `hidden`, `scroll`, `auto` чи `overlay`), навіть коли такий предок не є найближчим справді прокручуваним предком. + > **Примітка:** Щонайменше одна зі властивостей [inset](/uk/docs/Web/CSS/inset) ({{cssxref("top")}}, {{cssxref("inset-block-start")}}, {{cssxref("right")}}, {{cssxref("inset-inline-end")}} тощо) повинна мати значення, відмінне від `auto`, за віссю, за якою елемент повинен стати липким. Якщо обидві властивості `inset` за віссю мають значення `auto`, то за цією віссю значення `sticky` буде поводитися як `relative`. + ## Опис ### Типи позиціонування diff --git a/files/uk/web/css/text-overflow/index.md b/files/uk/web/css/text-overflow/index.md index f4b9873196..8bb1fc6f53 100644 --- a/files/uk/web/css/text-overflow/index.md +++ b/files/uk/web/css/text-overflow/index.md @@ -35,11 +35,7 @@ text-overflow: revert-layer; text-overflow: unset; ``` -Властивість `text-overflow` може бути задана у вигляді одного чи двох значень. Якщо дано одне значення, то воно задає поведінку для кінця рядка (правого кінця для тексту зліва направо, лівого кінця для тексту справа наліво). Якщо дані два значення, то перше з них задає поведінку переповнення зліва рядка, а друге – справа. - -- одне зі значень – ключових слів: `clip`, `ellipsis`, `fade` -- функція `fade()`, котрій передається {{cssxref("<length>")}} чи {{cssxref("<percentage>")}} для контролю довжини шляху зникнення -- ``. +Властивість `text-overflow` може бути задана у вигляді одного чи двох значень. Якщо дано одне значення, то воно задає поведінку для кінця рядка (правого кінця для тексту зліва направо, лівого кінця для тексту справа наліво). Якщо дані два значення, то перше з них задає поведінку переповнення зліва рядка, а друге – справа. Ця властивість приймає або значення – ключове слово (`clip` або `ellipsis`), або значення ``. ### Значення @@ -49,13 +45,6 @@ text-overflow: unset; - : Це ключове слово покаже трикрапку (`'…'`, `U+2026 HORIZONTAL ELLIPSIS`), що представлятиме обрізаний текст. Трикрапка демонструється всередині [області вмісту](/uk/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model), зменшуючи кількість показаного тексту. Якщо простору для виведення трикрапки недостатньо, вона обрізається. - `` {{experimental_inline}} - : {{cssxref("<string>")}}, що буде використовуватись для представлення обрізаного тексту. Рядок виводиться всередині [області вмісту](/uk/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model), скорочуючи розмір показаного тексту. Якщо простору для виведення самого рядка недостатньо, вона обрізається. -- `fade` {{experimental_inline}} - - : Це ключове слово обрізає рядковий вміст, що переливається, і застосовує біля краю рамок строю ефект поступового зникнення, що набуває повної прозорості біля самого краю. -- `fade( | )` {{experimental_inline}} - - - : Ця функція обрізає рядковий вміст, що переливається, і застосовує біля краю рамок строю ефект поступового зникнення, що набуває повної прозорості біля самого краю. - - Аргумент визначає відстань, над якою застосовується ефект зникнення. {{cssxref("<percentage>")}} застосовується відносно довжини рамок строю. Значення, менші за `0`, обрізаються до `0`. Значення, більші за довжину рамок строю, обрізаються до довжини рамок строю. ## Формальне визначення diff --git a/files/uk/web/css/transform-function/coord_in_r2.png b/files/uk/web/css/transform-function/coord_in_r2.png new file mode 100644 index 0000000000..2428702e53 Binary files /dev/null and b/files/uk/web/css/transform-function/coord_in_r2.png differ diff --git a/files/uk/web/css/transform-function/index.md b/files/uk/web/css/transform-function/index.md new file mode 100644 index 0000000000..e62a8d4c9a --- /dev/null +++ b/files/uk/web/css/transform-function/index.md @@ -0,0 +1,262 @@ +--- +title: +slug: Web/CSS/transform-function +page-type: css-type +browser-compat: css.types.transform-function +--- + +{{CSSRef}} + +[Тип даних](/uk/docs/Web/CSS/CSS_Types) [CSS](/uk/docs/Web/CSS) **``** (функція перетворення) представляє перетворення, що впливає на вигляд елемента. [Функції](/uk/docs/Web/CSS/CSS_Functions) перетворення можуть обертати, змінювати розмір, спотворювати чи переміщати елемент у двовимірному, чи тривимірному просторі. Цей тип вживається у властивості {{cssxref("transform")}}. + +## Синтаксис + +Тип даних `` задається за допомогою однієї з перетворювальних функцій, перелічених нижче. Кожна функція застосовує геометричну операцію, або у двовимірному, або в тривимірному просторі. + +### Матричне перетворення + +- [`matrix()`](/uk/docs/Web/CSS/transform-function/matrix) + - : Описує однорідну двовимірну матрицю перетворення. +- [`matrix3d()`](/uk/docs/Web/CSS/transform-function/matrix3d) + - : Описує тривимірне перетворення у вигляді однорідної матриці 4×4. + +### Перспектива + +- [`perspective()`](/uk/docs/Web/CSS/transform-function/perspective) + - : Задає відстань між користувачем і планом z=0. + +### Обертання + +- [`rotate()`](/uk/docs/Web/CSS/transform-function/rotate) + - : Обертає елемент навколо фіксованої точки на двовимірному плані. +- [`rotate3d()`](/uk/docs/Web/CSS/transform-function/rotate3d) + - : Обертає елемент навколо фіксованої осі в тривимірному просторі. +- [`rotateX()`](/uk/docs/Web/CSS/transform-function/rotateX) + - : Обертає елемент навколо горизонтальної осі. +- [`rotateY()`](/uk/docs/Web/CSS/transform-function/rotateY) + - : Обертає елемент навколо вертикальної осі. +- [`rotateZ()`](/uk/docs/Web/CSS/transform-function/rotateZ) + - : Обертає елемент навколо осі Z. + +### Масштабування (зміна розміру) + +- [`scale()`](/uk/docs/Web/CSS/transform-function/scale) + - : Масштабує елемент у двовимірному просторі. +- [`scale3d()`](/uk/docs/Web/CSS/transform-function/scale3d) + - : Масштабує елемент у тривимірному просторі. +- [`scaleX()`](/uk/docs/Web/CSS/transform-function/scaleX) + - : Масштабує елемент по горизонталі. +- [`scaleY()`](/uk/docs/Web/CSS/transform-function/scaleY) + - : Масштабує елемент по вертикалі. +- [`scaleZ()`](/uk/docs/Web/CSS/transform-function/scaleZ) + - : Масштабує елемент по осі Z. + +### Нахиляння (спотворення) + +- [`skew()`](/uk/docs/Web/CSS/transform-function/skew) + - : Нахиляє елемент на двовимірному плані. +- [`skewX()`](/uk/docs/Web/CSS/transform-function/skewX) + - : Нахиляє елемент по горизонталі. +- [`skewY()`](/uk/docs/Web/CSS/transform-function/skewY) + - : Нахиляє елемент по вертикалі. + +### Переклад (пересування) + +- [`translate()`](/uk/docs/Web/CSS/transform-function/translate) + - : Перекладає елемент на двовимірному плані. +- [`translate3d()`](/uk/docs/Web/CSS/transform-function/translate3d) + - : Перекладає елемент у тривимірному просторі. +- [`translateX()`](/uk/docs/Web/CSS/transform-function/translateX) + - : Перекладає елемент по горизонталі. +- [`translateY()`](/uk/docs/Web/CSS/transform-function/translateY) + - : Перекладає елемент по вертикалі. +- [`translateZ()`](/uk/docs/Web/CSS/transform-function/translateZ) + - : Перекладає елемент по осі Z. + +## Опис + +Для опису розміру та форми елемента HTML, як і різноманітних застосованих до нього перетворень, можуть вживатися різні координатні моделі. Найпоширеніша з них – [Декартова система координат](https://uk.wikipedia.org/wiki/%D0%94%D0%B5%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%B2%D0%B0_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D0%BA%D0%BE%D0%BE%D1%80%D0%B4%D0%B8%D0%BD%D0%B0%D1%82) хоч іноді також вживаються [однорідні координати](https://uk.wikipedia.org/wiki/%D0%9E%D0%B4%D0%BD%D0%BE%D1%80%D1%96%D0%B4%D0%BD%D1%96_%D0%BA%D0%BE%D0%BE%D1%80%D0%B4%D0%B8%D0%BD%D0%B0%D1%82%D0%B8). + +### Декартові координати + +У Декартовій системі координат двовимірна точка описується за допомогою двох значень: координати x (абсциси) та координати y (ординати). Це позначається векторним записом `(x, y)`. + +![Декартів план, що показує від'ємну вісь Y і додатну вісь X, що виходять з початку координат, а також три точки P1, P2 і P3 з відповідними значеннями X і Y](coord_in_r2.png) + +У CSS (і більшості комп'ютерної графіки) початок координат `(0, 0)` представляє _верхній лівий_ кут будь-якого елемента. Додатні координати – зліва та справа від початку координат, а від'ємні – згори та зліва. Таким чином, точка за 2 одиниці справа та за 5 одиниць внизу буде `(2, 5)`, а точка за 3 одиниці зліва та 12 одиниці згори буде `(-3, -12)`. + +### Функції перетворення + +Функції перетворення змінюють вигляд елемента, змінюючи значення його координат. Лінійна функція трансформації описується за допомогою матриці 2×2, як у прикладі нижче: + +(ac bd) + +Ця функція застосовується до елемента за допомогою перемноження матриць. Таким чином, кожна координата змінюється відповідно до значень у матриці: + +(ac bd )(xy )= (ax+cy bx+dy) + +Можна навіть застосовувати декілька перетворень підряд: + +(a1 c1 b1 d1 )(a2 c2 b2 d2 )= (a1 a2 + c1 b2 a1 c2 + c1 d2 b1 a2 + d1 b2 b1 c2 + d1 d2) + +За допомогою такого запису можна описати, а отже – скомпонувати, більшість поширених перетворень: обертання, масштабування, нахиляння. (Фактично, всі перетворення, що є лінійними функціями, можуть бути так описані.) Складені перетворення застосовуються справа наліво. + +Проте одне важливе перетворення не є лінійним, а отже – повинно мати особливий випадок при застосуванні такого запису: перекладання. Вектор перекладання `(tx, ty)` повинен бути виражений окремо, як два додаткові параметри. + +> **Примітка:** [Однорідні координати](https://uk.wikipedia.org/wiki/%D0%9E%D0%B4%D0%BD%D0%BE%D1%80%D1%96%D0%B4%D0%BD%D1%96_%D0%BA%D0%BE%D0%BE%D1%80%D0%B4%D0%B8%D0%BD%D0%B0%D1%82%D0%B8), хоч і хитріші за Декартові, у [проєктивній геометрії](https://uk.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D1%94%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D0%B0_%D0%B3%D0%B5%D0%BE%D0%BC%D0%B5%D1%82%D1%80%D1%96%D1%8F) призводять до матриць перетворення 3×3, і можуть виражати переклад як лінійну функцію. + +> **Примітка:** Функції перетворення вживаються з властивістю `transform`, але не з окремими властивостями перетворення – {{cssxref("translate")}}, {{cssxref("scale")}} чи {{cssxref("rotate")}}. + +## Приклади + +### Порівняння функцій перетворення + +Наступний приклад містить тривимірний куб, створений з елементів DOM і перетворень, а також меню вибору, яке дає змогу вибрати різні функції для перетворення куба, щоб порівняти вплив різних типів. + +Оберіть один тип, і відповідне перетворення застосовується до куба; за 2 секунди куб повертається до початкового стану. Його початковий стан – трохи обернений за допомогою `transform3d()`, щоб спостерігався ефект усіх перетворень. + +#### HTML + +```html +
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+ +
+ + +
+
+``` + +#### CSS + +```css +main { + width: 400px; + height: 200px; + padding: 50px; + background-image: linear-gradient(135deg, white, cyan, white); +} + +#example-element { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transition: transform 1.5s; + transform: rotate3d(1, 1, 1, 30deg); +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + font-size: 60px; + color: #fff; +} + +.front { + background: rgba(90, 90, 90, 0.7); + transform: translateZ(50px); +} + +.back { + background: rgba(0, 210, 0, 0.7); + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgba(210, 0, 0, 0.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgba(0, 0, 210, 0.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgba(210, 210, 0, 0.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgba(210, 0, 210, 0.7); + transform: rotateX(-90deg) translateZ(50px); +} + +.select-form { + margin-top: 50px; +} +``` + +#### JavaScript + +```js +const selectElem = document.querySelector("select"); +const example = document.querySelector("#example-element"); + +selectElem.addEventListener("change", () => { + if (selectElem.value === "Оберіть функцію") { + return; + } else { + example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`; + setTimeout(() => { + example.style.transform = "rotate3d(1, 1, 1, 30deg)"; + }, 2000); + } +}); +``` + +#### Результат + +{{EmbedLiveSample('porivniannia-funktsii-peretvorennia', '100%', 300)}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- Властивість CSS {{cssxref("transform")}} +- Окремі властивості перетворення: + - {{cssxref("translate")}} + - {{cssxref("scale")}} + - {{cssxref("rotate")}} diff --git a/files/uk/web/css/width/index.md b/files/uk/web/css/width/index.md index bbc9302f63..573f0e5f5e 100644 --- a/files/uk/web/css/width/index.md +++ b/files/uk/web/css/width/index.md @@ -2,25 +2,19 @@ title: width slug: Web/CSS/width page-type: css-property -tags: - - CSS - - CSS Property - - Layout - - Reference - - dimensions - - recipe:css-property - - size - - width browser-compat: css.properties.width --- {{CSSRef}} -Властивість CSS **`width`** (ширина) встановлює ширину елемента. Усталено вона встановлює ширину [області вмісту](/uk/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#oblast-vmistu), однак якщо властивість {{cssxref("box-sizing")}} має значення `border-box`, то вказане значення стає шириною [відмежованої області](/uk/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#vidmezhovana-oblast). +Властивість CSS **`width`** (ширина) встановлює ширину елемента. Усталено вона встановлює ширину [області вмісту](/uk/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#oblast-vmistu), однак якщо властивість {{cssxref("box-sizing")}} має значення `border-box`, то вказане значення стає шириною [відмежованої області](/uk/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model#vidmezhovana-oblast). {{EmbedInteractiveExample("pages/css/width.html")}} -Властивості {{cssxref("min-width")}} та {{cssxref("max-width")}} зневажають `width`. +Задане значення `width` застосовується до області вмісту, поки воно залишається в межах значень, заданих властивостями {{cssxref("min-width")}} і {{cssxref("max-width")}}. + +- Якщо значення `width` менше за значення `min-width`, то `min-width` відкидає `width`. +- Якщо значення `width` більше за значення `max-width`, то `max-width` відкидає `width`. ## Синтаксис @@ -35,6 +29,7 @@ width: 75%; /* Значення – ключові слова */ width: max-content; width: min-content; +width: fit-content; width: fit-content(20em); width: auto; @@ -49,16 +44,18 @@ width: unset; ### Значення - {{cssxref("<length>")}} - - : Визначає ширину у вигляді абсолютного значення. + - : Визначає ширину у вигляді значення відстані. - {{cssxref("<percentage>")}} - - : Визначає ширину у вигляді відсотків від ширини контейнерного блока. + - : Визначає ширину у вигляді відсотків від ширини [контейнерного блока](/uk/docs/Web/CSS/Containing_block). - `auto` (автоматично) - : Браузер обчислить та обере ширину для обраного елемента. - `max-content` (максимальний вміст) - : Внутрішньо бажана ширина. - `min-content` (мінімальний вміст) - : Внутрішньо найменша можлива ширина. -- `fit-content({{cssxref("<length-percentage>")}})` (припасувати вміст) +- `fit-content` + - : Використовує доступний простір, але не більше, ніж [max-content](/uk/docs/Web/CSS/max-content), тобто `min(max-content, max(min-content, stretch))`. +- `fit-content({{cssxref("<length-percentage>")}})` {{Experimental_Inline}} - : Використовує формулу fit-content щодо доступного простору, заміненого вказаним аргументом, тобто `min(max-content, max(min-content, ))`. ## Занепокоєння щодо доступності @@ -178,7 +175,7 @@ p.minblue { ## Дивіться також -- [Блокова модель](/uk/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model) +- [Блокова модель](/uk/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - {{cssxref("height")}} - {{cssxref("box-sizing")}} - {{cssxref("min-width")}}, {{cssxref("max-width")}} diff --git a/files/uk/web/guide/index.md b/files/uk/web/guide/index.md new file mode 100644 index 0000000000..ba02b77a82 --- /dev/null +++ b/files/uk/web/guide/index.md @@ -0,0 +1,74 @@ +--- +title: Посібники для розробників +slug: Web/Guide +page-type: landing-page +--- + + + +Документація WebDoky вміщає низку посібників. Це статті, що пропонують додаткові приклади використання, або навчають використовувати певний API або можливість. Ця сторінка містить посилання на найпопулярніші матеріали. + +## HTML + +- [Структурування Вебу за допомогою HTML](/uk/docs/Learn/HTML) + - : Область вивчення HTML пропонує підручники, які допомагають вивчити HTML з нуля. +- [Основи HTML](/uk/docs/Learn/Getting_started_with_the_web/HTML_basics) + - : Ця стаття надає базове розуміння HTML. Прочитавши цей посібник, ви зможете далі ознайомитися з матеріалом в Області вивчення HTML. + +## CSS + +- [Вчимося стилізувати HTML засобами CSS](/uk/docs/Learn/CSS) + - : Наш повний посібник з CSS, який допоможе вивчити CSS з нуля, від перших кроків до стилізації тексту, створення макетів і багатьох інших речей. +- [Посібники з компонування CSS](/uk/docs/Web/Guide/CSS/CSS_Layout) + - : У WebDoky є чимало посібників з Компонування CSS, а ця сторінка збирає їх всі докупи. +- [Застосування анімацій CSS](/uk/docs/Web/CSS/CSS_animations/Using_CSS_animations) + - : Завдяки анімаціям CSS можна анімувати переходи від одного налаштування стилю CSS до іншого. Цей посібник допоможе ознайомитися з властивостями анімації. + +## JavaScript + +- [Область вивчення JavaScript](/uk/docs/Learn/JavaScript) + - : Чи ви цілковитий початківець, чи сподіваєтеся оновити свої навички, це місце, з якого варто почати. +- [AJAX](/uk/docs/Web/Guide/AJAX) + - : AJAX – це термін, що визначає групу технологій, котра дає вебзастосункам змогу швидко та поступово оновлювати користувацький інтерфейс, не перезавантажуючи всю сторінку браузера. Завдяки цьому застосунок стає швидшим і більш чуттєвим до дій користувача. + +## Мультимедіа + +- [Графіка у Вебі](/uk/docs/Web/Guide/Graphics) + - : Сучасні вебсайти та вебзастосунки нерідко потребують відображення графіки різної складності. +- [Доставлення аудіо та відео](/uk/docs/Web/Guide/Audio_and_video_delivery) + - : Доставляти аудіо та відео у Вебі можна різними способами, від «статичних» медіафайлів до адаптивних живих потоків. Ця стаття задумана як вихідна точка для дослідження різних механізмів доставляння мультимедійних ресурсів у Вебі та сумісності з популярними браузерами. +- [Операції з аудіо та відео](/uk/docs/Web/Guide/Audio_and_video_manipulation) + - : Краса Вебу полягає в тому, що можна поєднувати технології, створюючи нові форми. Наявність у браузері нативних аудіо та відео дає змогу використовувати ці потоки даних вкупі з технологіями штибу {{htmlelement("canvas")}}, [WebGL](/uk/docs/Web/API/WebGL_API) та [Web Audio API](/uk/docs/Web/API/Web_Audio_API), щоб безпосередньо змінювати аудіо та відео, наприклад, додавати до аудіо ефекти реверберації чи компресії, а до відео – фільтри відтінків сірого чи сепії. Ця стаття надає довідку, яка пояснює, що потрібно зробити. + +## API + +- [Використання об'єктів FormData](/uk/docs/Web/API/XMLHttpRequest_API/Using_FormData_Objects) + - : Об'єкт [`FormData`](/uk/docs/Web/API/FormData) дає змогу зібрати набір пар ключ-значення для відправлення за допомогою `XMLHttpRequest`. Він призначений перш за все для відправляння даних форми, але може використовуватися незалежно від форми для передачі даних з ключами. Передача відбувається у тому ж форматі, який метод `submit()` форми використовував би для відправляння даних, якби тип кодування форми був заданий як «multipart/form-data». +- [Прогресивні вебзастосунки](/uk/docs/Web/Progressive_web_apps#kliuchovi-posibnyky-pwa) + - : Прогресивні вебзастосунки (PWA) використовують сучасні API Вебу вкупі з традиційною стратегією поступового вдосконалення, щоб створювати кросплатформні вебзастосунки. Ці застосунки працюють усюди та пропонують кілька можливостей, завдяки яким вони мають ті ж переваги користувацького досвіду, що й нативні застосунки. Цей набір посібників розповідає все, що потрібно знати про PWA. +- [Розбір і серіалізація XML](/uk/docs/Web/Guide/Parsing_and_serializing_XML) + - : Платформа Вебу пропонує різні методи розбору та серіалізації XML, кожен з яких має свої переваги та недоліки. + +## Ефективність + +- [Оптимізація та ефективність](/uk/docs/Web/Guide/Performance) + - : При розробці сучасних вебзастосунків і вебсайтів важливо, щоб вміст працював швидко й ефективно. Це дасть йому змогу працювати ефективно як на потужних настільних системах, так і на слабших портативних пристроях. + +## Мобільна веброзробка + +- [Мобільна веброзробка](/uk/docs/Web/Guide/Mobile) + - : Ця стаття надає огляд деяких основних технік, необхідних для створення вебсайтів, що працюють добре на мобільних пристроях. + +## Шрифти + +- [Посібник з варіативних шрифтів](/uk/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) + - : Дізнайтеся, як використовувати у своїх дизайнах варіативні шрифти. +- [Відкритий формат шрифту Вебу (WOFF)](/uk/docs/Web/Guide/WOFF) + - : WOFF (Відкритий формат шрифту Вебу) – це формат файлів шрифту, що безкоштовний для всіх для використання у Вебі. + +## Розробка користувацьких інтерфейсів + +- [Користувацьке введення та контрольні елементи](/uk/docs/Web/Guide/User_input_methods) + - : Сучасне користувацьке введення у Вебі не обмежується простими мишею та клавіатурою: згадайте, наприклад, про сенсорні екрани. Ця стаття надає рекомендації щодо керування користувацьким введенням та реалізації контрольних елементів у відкритих вебзастосунках, а також ЧаПи, реальні приклади та посилання на додаткову інформацію для тих, хто потребує більш детальної інформації про технології за лаштунками. diff --git a/files/uk/web/html/attributes/index.md b/files/uk/web/html/attributes/index.md new file mode 100644 index 0000000000..e7ba68fb4c --- /dev/null +++ b/files/uk/web/html/attributes/index.md @@ -0,0 +1,1484 @@ +--- +title: Довідка атрибутів HTML +slug: Web/HTML/Attributes +page-type: landing-page +--- + +{{HTMLSidebar("Attributes")}} + +Елементи в HTML мають **атрибути**; це додаткові значення, що налаштовують ці елементи або підлаштовують їх поведінку в різний спосіб, щоб відповідати бажаним критеріям. + +## Список атрибутів + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Назва атрибутаЕлементиОпис
+ accept + + {{HTMLElement("form")}}, {{HTMLElement("input")}} + Список типів, які приймає сервер, зазвичай – типів файлів.
+ accept-charset + {{HTMLElement("form")}} + Список кодувань, що підтримуються. +
+ accesskey + + Глобальний атрибут + + Клавіатурна комбінація для активування чи додання фокуса до елемента. +
+ action + {{HTMLElement("form")}} + URI програми, що обробляє інформацію, подану через форму. +
+ align {{deprecated_inline}} + + {{HTMLElement("caption")}}, {{HTMLElement("col")}}, + {{HTMLElement("colgroup")}}, + {{HTMLElement("hr")}}, {{HTMLElement("iframe")}}, + {{HTMLElement("img")}}, {{HTMLElement("table")}}, + {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, + {{HTMLElement("tfoot")}}, {{HTMLElement("th")}}, + {{HTMLElement("thead")}}, {{HTMLElement("tr")}} + + Задає горизонтальне шикування елемента. +
+ allow + {{HTMLElement("iframe")}} + Задає feature-policy для вбудованого фрейму. +
+ alt + + {{HTMLElement("area")}}, + {{HTMLElement("img")}}, {{HTMLElement("input")}} + + Альтернативний текст на випадок того, що зображення не може бути показане. +
+ async + {{HTMLElement("script")}} + Виконує сценарій асинхронно. +
+ autocapitalize + + Глобальний атрибут + + Задає те, чи додаються автоматично великі літери до введення користувача +
+ autocomplete + + {{HTMLElement("form")}}, {{HTMLElement("input")}}, + {{HTMLElement("select")}}, + {{HTMLElement("textarea")}} + + Позначає те, чи контрольні елементи в формі повинні усталено автоматично доповнюватися браузером. +
+ autoplay + + {{HTMLElement("audio")}}, + {{HTMLElement("video")}} + + Аудіо чи відео повинно відтворюватися якомога скоріше. +
background + {{HTMLElement("body")}}, {{HTMLElement("table")}}, + {{HTMLElement("td")}}, {{HTMLElement("th")}} + + Задає URL файлу зображення. +
+

+ Примітка: Попри те, що браузери та клієнти електронної пошти досі можуть підтримувати цей атрибут, він є застарілим. Замість нього слід використовувати CSS {{Cssxref("background-image")}}. +

+
+
bgcolor + {{HTMLElement("body")}}, {{HTMLElement("col")}}, + {{HTMLElement("colgroup")}}, + {{HTMLElement("marquee")}}, + {{HTMLElement("table")}}, + {{HTMLElement("tbody")}}, + {{HTMLElement("tfoot")}}, {{HTMLElement("td")}}, + {{HTMLElement("th")}}, {{HTMLElement("tr")}} + +

Колір фону елемента.

+
+

+ Примітка: Це історичний атрибут. Замість нього слід використовувати властивість CSS {{Cssxref("background-color")}}. +

+
+
border + {{HTMLElement("img")}}, {{HTMLElement("object")}}, + {{HTMLElement("table")}} + +

Ширина межі.

+
+

+ Примітка: Це історичний атрибут. Будь ласка, використовуйте замість нього властивість CSS {{Cssxref("border")}}. +

+
+
+ buffered + + {{HTMLElement("audio")}}, + {{HTMLElement("video")}} + + Вміщає часовий діапазон вже буферизованих медіаданих. +
+ capture + {{HTMLElement("input")}} + Атрибут зі специфікації Медіазахоплення, що задає, що можна захопити новий файл. +
+ charset + + {{HTMLElement("meta")}} + + Оголошує кодування символів сторінки або сценарію. +
+ checked + + {{HTMLElement("input")}} + + Позначає, чи повинен елемент мати позначку при завантаженні сторінки. +
+ cite + + {{HTMLElement("blockquote")}}, + {{HTMLElement("del")}}, {{HTMLElement("ins")}}, + {{HTMLElement("q")}} + + Містить URI, який вказує на джерело цитати чи зміни. +
+ class + + Глобальний атрибут + + Нерідко застосовується вкупі з CSS для оформлення елементів загальними властивостями. +
color + {{HTMLElement("font")}}, {{HTMLElement("hr")}} + +

+ Цей атрибут задає колір тексту за допомогою або назви кольору, або кольору, заданого в шістнадцятковому форматі #RRGGBB. +

+
+

+ Примітка: Це історичний атрибут. Будь ласка, використовуйте замість нього властивість CSS {{Cssxref("color")}}. +

+
+
+ cols + {{HTMLElement("textarea")}} + Визначає число колонок у текстовій області. +
+ colspan + + {{HTMLElement("td")}}, {{HTMLElement("th")}} + + Атрибут колонкової протяжності визначає число колонок, які повинна охоплювати комірка. +
+ content + {{HTMLElement("meta")}} + Значення, пов'язане з http-equiv або name, в залежності від контексту. +
+ contenteditable + + Глобальний атрибут + + Позначає те, чи доступний вміст елемента для редагування. +
+ contextmenu {{non-standard_inline}} {{deprecated_inline}} + + Глобальний атрибут + + Визначає ідентифікатор елемента {{HTMLElement("menu")}}, який буде служити контекстним меню елемента. +
+ controls + + {{HTMLElement("audio")}}, + {{HTMLElement("video")}} + + Позначає те, чи повинен браузер показувати користувачам елементи керування відтворенням. +
+ coords + {{HTMLElement("area")}} + Набір значень, що визначають координати активної ділянки. +
+ crossorigin + + {{HTMLElement("audio")}}, {{HTMLElement("img")}}, + {{HTMLElement("link")}}, {{HTMLElement("script")}}, + {{HTMLElement("video")}} + + Як елемент обробляє запити до інших походжень +
+ csp + {{experimental_inline}} + {{HTMLElement("iframe")}} + Задає Політику безпеки вмісту, яку повинен накласти на себе вбудований документ. +
+ data + {{HTMLElement("object")}} + Задає URL ресурсу. +
+ data-* + + Глобальний атрибут + + Дає змогу приєднувати до елементів HTML власні атрибути. +
+ datetime + + {{HTMLElement("del")}}, {{HTMLElement("ins")}}, + {{HTMLElement("time")}} + + Позначає дату та час, пов'язані з елементом. +
+ decoding + {{HTMLElement("img")}} + Позначає бажаний метод декодування зображення. +
+ default + {{HTMLElement("track")}} + Позначає те, що доріжка повинна бути ввімкнена, якщо налаштування користувача не задають щось інше. +
+ defer + {{HTMLElement("script")}} + Позначає те, що сценарій повинен бути виконаний після того, як сторінка буде розібрана. +
+ dir + + Глобальний атрибут + + Визначає напрям тексту. Дозволені значення: ltr (зліва направо) й rtl (справа наліво). +
+ dirname + + {{HTMLElement("input")}}, + {{HTMLElement("textarea")}} +
+ disabled + + {{HTMLElement("button")}}, + {{HTMLElement("fieldset")}}, + {{HTMLElement("input")}}, + {{HTMLElement("optgroup")}}, + {{HTMLElement("option")}}, + {{HTMLElement("select")}}, + {{HTMLElement("textarea")}} + + Позначає те, чи може користувач взаємодіяти з елементом. +
+ download + {{HTMLElement("a")}}, {{HTMLElement("area")}} + Позначає те, що гіперпосилання призначене для завантаження ресурсу. +
+ draggable + + Глобальний атрибут + + Визначає те, чи може елемент бути перетягнутий. +
+ enctype + {{HTMLElement("form")}} + Визначає тип вмісту даних форми, коли method має значення POST. +
+ enterkeyhint + {{experimental_inline}} + + {{HTMLElement("textarea")}}, + contenteditable + + enterkeyhint задає те, який підпис дії (або піктограма) повинен бути показаний для клавіші введення на віртуальних клавіатурах. Цей атрибут може бути використаний на формових елементах (наприклад, як значення елементів textarea), або на елементах в режимі редагування (наприклад, з використанням атрибута contenteditable). +
+ for + + {{HTMLElement("label")}}, + {{HTMLElement("output")}} + + Описує елементи, що належать цьому елементові. +
+ form + + {{HTMLElement("button")}}, + {{HTMLElement("fieldset")}}, + {{HTMLElement("input")}}, + {{HTMLElement("label")}}, + {{HTMLElement("meter")}}, + {{HTMLElement("object")}}, + {{HTMLElement("output")}}, + {{HTMLElement("progress")}}, + {{HTMLElement("select")}}, + {{HTMLElement("textarea")}} + + Позначає форму, що є власником елемента. +
+ formaction + + {{HTMLElement("input")}}, + {{HTMLElement("button")}} + + Позначає дію елемента, відкидаючи дію, визначену на {{HTMLElement("form")}}. +
+ formenctype + + {{HTMLElement("button")}}, + {{HTMLElement("input")}} + + Якщо кнопка чи поле є {{Glossary("submit button", "кнопкою подання")}} (наприклад, type="submit"), то цей атрибут задає тип кодування для відправлення форми. Якщо цей атрибут заданий, то він відкидає атрибут enctype форми-власника кнопки. +
+ formmethod + + {{HTMLElement("button")}}, + {{HTMLElement("input")}} + + Якщо кнопка чи поле є {{Glossary("submit button", "кнопкою подання")}} (наприклад, type="submit"), то цей атрибут задає метод відправлення форми (GET, POST тощо). Якщо цей атрибут заданий, то він відкидає атрибут method форми-власника кнопки. +
+ formnovalidate + + {{HTMLElement("button")}}, + {{HTMLElement("input")}} + + Якщо кнопка чи поле є {{Glossary("submit button", "кнопкою подання")}} (наприклад, type="submit"), то цей булевий атрибут вказує, що форма не повинна перевірятися при поданні. Якщо цей атрибут заданий, то він відкидає атрибут novalidate форми-власника кнопки. +
+ formtarget + + {{HTMLElement("button")}}, + {{HTMLElement("input")}} + + Якщо кнопка чи поле є {{Glossary("submit button", "кнопкою подання")}} (наприклад, type="submit"), то цей атрибут задає контекст перегляду (наприклад, вкладку, вікно чи вбудований фрейм), в якому повинна бути показана відповідь, отримана після подання форми. Якщо цей атрибут заданий, то він відкидає атрибут target форми-власника кнопки. +
+ headers + + {{HTMLElement("td")}}, {{HTMLElement("th")}} + + Ідентифікатори елементів <th>, що застосовуються до цього елемента. +
height + {{HTMLElement("canvas")}}, + {{HTMLElement("embed")}}, + {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, + {{HTMLElement("input")}}, + {{HTMLElement("object")}}, + {{HTMLElement("video")}} + +

+ Задає висоту елементів, перелічених тут. Для всіх інших елементів слід використовувати властивість CSS {{cssxref("height")}}. +

+
+

+ Примітка: У певних випадках, наприклад, для {{HTMLElement("div")}}, це історичний атрибут, і в такому разі слід натомість використовувати властивість CSS {{Cssxref("height")}}. +

+
+
+ hidden + + Глобальний атрибут + + Запобігає візуалізації елемента, при цьому залишаючи дочірні елементи, наприклад, елементи сценаріїв, активними. +
+ high + {{HTMLElement("meter")}} + Позначає нижню межу верхнього діапазону. +
+ href + + {{HTMLElement("a")}}, {{HTMLElement("area")}}, + {{HTMLElement("base")}}, {{HTMLElement("link")}} + + URL зв'язаного ресурсу. +
+ hreflang + + {{HTMLElement("a")}}, {{HTMLElement("link")}} + + Задає мову зв'язаного ресурсу. +
+ http-equiv + {{HTMLElement("meta")}} + Визначає директиву pragma. +
+ id + + Глобальний атрибут + + Нерідко вживається вкупі з CSS для оформлення конкретного елемента. Значення цього атрибута повинно бути унікальним. +
+ integrity + + {{HTMLElement("link")}}, {{HTMLElement("script")}} + +

+ Задає значення Цілісності підресурсу, яке дає браузерам змогу перевірити те, що вони завантажують. +

+
+ intrinsicsize + {{deprecated_inline}} + {{HTMLElement("img")}} + Цей атрибут каже браузеру ігнорувати фактичний власний розмір зображення та вдавати, ніби він має власний розмір, вказаний в цьому атрибуті. +
+ inputmode + + {{HTMLElement("textarea")}}, + contenteditable + + Надає підказку щодо типу даних, які можуть бути введені користувачем під час редагування елемента або його вмісту. Цей атрибут може бути використаний з формовими елементами (наприклад, як значення елементів textarea), або на елементах в режимі редагування (наприклад, з використанням атрибута contenteditable). +
+ ismap + {{HTMLElement("img")}} + Позначає те, що зображення є частиною серверної карти зображень. +
+ itemprop + + Глобальний атрибут +
+ kind + {{HTMLElement("track")}}Задає різновид текстової доріжки.
+ label + + {{HTMLElement("optgroup")}}, + {{HTMLElement("option")}}, + {{HTMLElement("track")}} + + Задає заголовок елемента для прочитання користувачем. +
+ lang + + Глобальний атрибут + + Визначає мову, що вживається в елементі. +
+ language + {{deprecated_inline}} + {{HTMLElement("script")}}Визначає мову сценарію, що вживається в елементі.
loading {{experimental_inline}} + {{HTMLElement("img")}}, {{HTMLElement("iframe")}} + + Позначає те, чи повинен елемент завантажуватися ліниво + (loading="lazy"), чи негайно + (loading="eager"). +
+ list + {{HTMLElement("input")}} + Позначає список наперед визначених варіантів для пропонування користувачу. +
+ loop + + {{HTMLElement("audio")}}, + {{HTMLElement("marquee")}}, + {{HTMLElement("video")}} + + Позначає те, чи повинен медіаресурс починати відтворення з початку, коли він закінчиться. +
+ low + {{HTMLElement("meter")}}Позначає верхню межу нижнього діапазону.
+ manifest + {{deprecated_inline}} + {{HTMLElement("html")}} + Задає URL маніфесту кешу документа. +
+

+ Примітка: Цей атрибут застарів, замість нього слід використовувати <link rel="manifest">. +

+
+
+ max + + {{HTMLElement("input")}}, + {{HTMLElement("meter")}}, + {{HTMLElement("progress")}} + + Позначає максимальне дозволене значення. +
+ maxlength + + {{HTMLElement("input")}}, + {{HTMLElement("textarea")}} + + Визначає максимальне число символів, дозволене в елементі. +
+ minlength + + {{HTMLElement("input")}}, + {{HTMLElement("textarea")}} + + Визначає мінімальну кількість символів, дозволену в елементі. +
+ media + + {{HTMLElement("a")}}, {{HTMLElement("area")}}, + {{HTMLElement("link")}}, {{HTMLElement("source")}}, + {{HTMLElement("style")}} + + Задає підказку щодо засобу візуалізації, для якого створений зв'язаний ресурс. +
+ method + {{HTMLElement("form")}} + Визначає те, який метод HTTP повинен використовуватися при поданні форми. Може бути GET (усталено) або POST. +
+ min + + {{HTMLElement("input")}}, + {{HTMLElement("meter")}} + + Позначає мінімальне дозволене значення. +
+ multiple + + {{HTMLElement("input")}}, + {{HTMLElement("select")}} + + Позначає те, чи можуть в поле бути введені кілька значень типу email або file. +
+ muted + + {{HTMLElement("audio")}}, + {{HTMLElement("video")}} + + Позначає те, чи буде аудіо спочатку заглушене при завантаженні сторінки. +
+ name + + {{HTMLElement("button")}}, {{HTMLElement("form")}}, + {{HTMLElement("fieldset")}}, + {{HTMLElement("iframe")}}, + {{HTMLElement("input")}}, + {{HTMLElement("object")}}, + {{HTMLElement("output")}}, + {{HTMLElement("select")}}, + {{HTMLElement("textarea")}}, + {{HTMLElement("map")}}, {{HTMLElement("meta")}}, + {{HTMLElement("param")}} + + Назва елемента. Наприклад, використовується сервером для ідентифікації полів при поданні форми. +
+ novalidate + {{HTMLElement("form")}} + Цей атрибут позначає те, що форма не повинна проходити валідацію при поданні. +
+ open + + {{HTMLElement("details")}}, + {{HTMLElement("dialog")}} + + Позначає те, чи є вміст наразі видимим (у випадку елемента <details>), або чи є діалог активним і доступним для взаємодії (у випадку елемента <dialog>). +
+ optimum + {{HTMLElement("meter")}} + Позначає оптимальне числове значення. +
+ pattern + {{HTMLElement("input")}} + Визначає регулярний вираз, відносно якого виконуватиметься валідація значення елемента. +
+ ping + {{HTMLElement("a")}}, {{HTMLElement("area")}} + Атрибут ping задає розділений пробілами список URL, які сповіщаються, коли користувач переходить за гіперпосиланням. +
+ placeholder + + {{HTMLElement("input")}}, + {{HTMLElement("textarea")}} + + Надає користувачам підказку щодо того, що повинно бути введено в поле. +
+ playsinline + + {{HTMLElement("video")}} + + Булів атрибут, який вказує на те, що відео повинно відтворюватися «вбудовано», тобто в межах області відтворення елемента. Зауважте, що відсутність цього атрибута не означає, що відео завжди буде відтворюватися на весь екран. +
+ poster + {{HTMLElement("video")}} + URL, що вміщає кадр-афішу, який буде показаний до того, як користувач почне відтворення або перемотування. +
+ preload + + {{HTMLElement("audio")}}, + {{HTMLElement("video")}} + + Позначає те, чи повинен бути попередньо завантажений весь ресурс, його частина або нічого. +
+ readonly + + {{HTMLElement("input")}}, + {{HTMLElement("textarea")}} + + Позначає те, чи може елемент редагуватися. +
+ referrerpolicy + + {{HTMLElement("a")}}, {{HTMLElement("area")}}, + {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, + {{HTMLElement("link")}}, {{HTMLElement("script")}} + Задає те, який посилач надсилається при отриманні ресурсу.
+ rel + + {{HTMLElement("a")}}, {{HTMLElement("area")}}, + {{HTMLElement("link")}} + + Задає взаємозв'язок між цільовим та зв'язаним об'єктами. +
+ required + + {{HTMLElement("input")}}, + {{HTMLElement("select")}}, + {{HTMLElement("textarea")}} + + Позначає те, чи є цей елемент обов'язковим для заповнення, чи ні. +
+ reversed + {{HTMLElement("ol")}} + Позначає те, чи повинен список відображатися у зворотному порядку, а не у звичайному. +
+ role + Глобальний атрибут + Визначає явну роль елемента для використання допоміжними технологіями. +
+ rows + {{HTMLElement("textarea")}} + Визначає число рядків у текстовій області. +
+ rowspan + + {{HTMLElement("td")}}, {{HTMLElement("th")}} + + Визначає число рядків, які повинна охоплювати комірка таблиці. +
+ sandbox + {{HTMLElement("iframe")}} + Не дає документові, завантаженому у вбудованому фреймі, використовувати певні можливості (наприклад, подавання форм або відкриття нових вікон). +
+ scope + {{HTMLElement("th")}} + Визначає комірки, до яких відноситься заголовок (визначений в елементі th). +
+ scoped + {{non-standard_inline}} {{deprecated_inline}} + {{HTMLElement("style")}}
+ selected + {{HTMLElement("option")}} + Визначає значення, яке буде вибрано при завантаженні сторінки. +
+ shape + {{HTMLElement("a")}}, {{HTMLElement("area")}}
+ size + + {{HTMLElement("input")}}, + {{HTMLElement("select")}} + + Визначає ширину елемента (в пікселях). Якщо атрибут type елемента має значення text або password, то це число символів. +
+ sizes + + {{HTMLElement("link")}}, {{HTMLElement("img")}}, + {{HTMLElement("source")}} +
+ slot + + Глобальний атрибут + + Присвоює елементові слот в тіньовому дереві тіньового DOM. +
+ span + + {{HTMLElement("col")}}, + {{HTMLElement("colgroup")}} +
+ spellcheck + + Глобальний атрибут + + Позначає те, чи дозволена перевірка правопису для елемента. +
+ src + + {{HTMLElement("audio")}}, + {{HTMLElement("embed")}}, + {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, + {{HTMLElement("input")}}, + {{HTMLElement("script")}}, + {{HTMLElement("source")}}, + {{HTMLElement("track")}}, + {{HTMLElement("video")}} + + URL вбудованого вмісту. +
+ srcdoc + {{HTMLElement("iframe")}}
+ srclang + {{HTMLElement("track")}}
+ srcset + + {{HTMLElement("img")}}, {{HTMLElement("source")}} + + Одне чи більше зображень-кандидатів. +
+ start + {{HTMLElement("ol")}} + Визначає номер першого пункту, якщо це не 1. +
+ step + {{HTMLElement("input")}}
+ style + + Глобальний атрибут + + Визначає стилі CSS, які відкидають раніше задані стилі. +
+ summary + {{deprecated_inline}} + {{HTMLElement("table")}}
+ tabindex + + Глобальний атрибут + + Відкидає усталений порядок табулювання браузера і використовує замість нього заданий. +
+ target + + {{HTMLElement("a")}}, {{HTMLElement("area")}}, + {{HTMLElement("base")}}, {{HTMLElement("form")}} + + Задає те, де відкривати пов'язаний документ (у випадку елемента <a>) або де відображати отриману відповідь (у випадку елемента <form>). +
+ title + + Глобальний атрибут + + Текст для виведення в спливній підказці при наведенні на елемент курсора. +
+ translate + + Глобальний атрибут + + Задає те, чи повинні перекладатися значення атрибутів елемента та значення його дочірніх вузлів Text при локалізації сторінки, чи залишатися незмінними. +
+ type + + {{HTMLElement("button")}}, + {{HTMLElement("input")}}, + {{HTMLElement("embed")}}, + {{HTMLElement("object")}}, + {{HTMLElement("ol")}}, + {{HTMLElement("script")}}, + {{HTMLElement("source")}}, + {{HTMLElement("style")}}, {{HTMLElement("menu")}}, + {{HTMLElement("link")}} + + Визначає тип елемента. +
+ usemap + + {{HTMLElement("img")}}, {{HTMLElement("input")}}, + {{HTMLElement("object")}} +
+ value + + {{HTMLElement("button")}}, {{HTMLElement("data")}}, + {{HTMLElement("input")}}, {{HTMLElement("li")}}, + {{HTMLElement("meter")}}, + {{HTMLElement("option")}}, + {{HTMLElement("progress")}}, + {{HTMLElement("param")}} + + Визначає усталене значення, яке буде відображатися в елементі при завантаженні сторінки. +
+ width + + {{HTMLElement("canvas")}}, + {{HTMLElement("embed")}}, + {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, + {{HTMLElement("input")}}, + {{HTMLElement("object")}}, + {{HTMLElement("video")}} + +

+ Для елементів, перерахованих тут, це встановлює їх ширину. +

+
+

+ Примітка: Для всіх інших елементів, таких як {{HTMLElement("div")}}, це історичний атрибут, і в такому випадку слід використовувати властивість CSS {{Cssxref("width")}}. +

+
+
+ wrap + {{HTMLElement("textarea")}} + Позначає те, чи може текст переноситися на новий рядок. +
+ +## Атрибути вмісту та атрибути IDL + +У HTML більшість атрибутів має дві сторони: **атрибут вмісту** та **атрибут IDL (мови визначення інтерфейсу)**. + +Атрибут вмісту – це атрибут, заданий зі вмісту (коду HTML), і його можна задати чи отримати за допомогою {{domxref("element.setAttribute()")}} або {{domxref("element.getAttribute()")}}. Атрибут вмісту завжди є рядком, навіть якщо очікуване значення повинно бути цілим числом. Наприклад, щоб задати атрибут `maxlength` елемента {{HTMLElement("input")}} значенням 42 за допомогою атрибута вмісту, необхідно викликати `setAttribute("maxlength", "42")` на відповідному елементі. + +Атрибут IDL також відомий як властивість JavaScript. Це атрибути, які можна зчитати чи задати за допомогою властивостей JavaScript виду `element.foo`. Атрибут IDL завжди буде використовувати (але може перетворювати) базовий атрибут вмісту для повернення значення при його отриманні, і зберігатиме щось в атрибуті вмісту при своєму заданні. Іншими словами, атрибути IDL, по суті, відображають атрибути вмісту. + +У більшості випадків атрибути IDL повертають свої значення в такому вигляді, в якому вони фактично використовують. Наприклад, усталений `type` елементів {{HTMLElement("input")}} – це "text", тому якщо задати `input.type="foobar"`, то елемент `` буде мати тип text (за зовнішнім виглядом та поведінкою), але значення атрибута вмісту "type" буде "foobar". Однак атрибут IDL `type` поверне рядок "text". + +Атрибути IDL не завжди є рядками; наприклад, `input.maxlength` – це число (знакове довге). При використанні атрибутів IDL зчитується та задається значення потрібного типу, тому `input.maxlength` завжди повертатиме число, а при заданні `input.maxlength` очікуватиметься число. Якщо передати інший тип, то цей тип автоматично перетворюється на число, відповідно до стандартних правил JavaScript для перетворення типів. + +Атрибути IDL можуть [відображати інші типи](https://html.spec.whatwg.org/multipage/urls-and-fetching.html), такі як беззнакове довге, URL, булеві значення тощо. На жаль, немає чітких правил, і спосіб поведінки атрибутів IDL у поєднанні з відповідними атрибутами вмісту залежить від конкретного атрибута. У більшості випадків виконуються [правила, викладені в специфікації](https://html.spec.whatwg.org/multipage/urls-and-fetching.html), але іноді цього не відбувається. Специфікації HTML намагаються зробити це якомога більш зручним для розробників, але з різних причин (в основному історичних) деякі атрибути поводяться дивно (наприклад, `select.size`), і варто прочитати специфікації, щоб зрозуміти, як саме вони поводяться. + +## Булеві атрибути + +Частина атрибутів вмісту (наприклад, `required`, `readonly`, `disabled`) називаються [булевими атрибутами](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes). Якщо булевий атрибут присутній, то його значення – **true**, а якщо він відсутній, то його значення – **false**. + +HTML визначає обмеження щодо дозволених значень булевих атрибутів: якщо такий атрибут присутній, то його значення повинно бути або порожнім рядком (або, що рівносильно, атрибут може мати неприсвоєне значення), або значення, що є нечутливою до регістру відповідністю канонічної назви атрибута в ASCII, без пробілів на початку чи в кінці. Наступні приклади – допустимі способи розмітки булевого атрибута: + +```html-nolint +
Це дійсний HTML, але недійсний XML.
+
Це також дійсний HTML, але недійсний XML.
+
Це дійсний HTML, а також дійсний XML.
+
+ Це також дійсний HTML і XML, але, можливо, трохи задовгий. +
+``` + +Для ясності слід додати, що значення "`true`" та "`false`" не дозволені для булевих атрибутів. Щоб представити значення false, атрибут повинен бути взагалі відсутнім. Це обмеження роз'яснює деякі поширені непорозуміння: наприклад, з `checked="false"` атрибут `checked` елемента буде розтлумачено як **true**, оскільки атрибут присутній. + +## Атрибути обробників подій + +> **Застереження:** Використання атрибутів обробників подій не рекомендується. Суміш HTML та JavaScript нерідко призводить до непідтримуваного коду, а виконання атрибутів обробників подій також може бути заблоковано політиками безпеки вмісту. + +На додачу до атрибутів, перелічених у таблиці вище, на всіх елементах також можуть бути задані глобальні [обробники подій](/uk/docs/Web/Events/Event_handlers#zastosuvannia-vlastyvostei-onevent), такі як [`onclick`](/uk/docs/Web/API/Element/click_event), як [атрибути вмісту](#atrybuty-vmistu-ta-atrybuty-idl). + +Усі атрибути обробників подій приймають рядок. Цей рядок використовується для синтезування [функції JavaScript](/uk/docs/Web/JavaScript/Reference/Functions) у вигляді `function name(/*args*/) {body}`, де `name` – це назва атрибута, а `body` – його значення. Обробник отримує ті ж параметри, що і його JavaScript-аналог – більшість обробників отримують лише один параметр `event`, тоді як `onerror` отримує п'ять: `event`, `source`, `lineno`, `colno`, `error`. Це означає, що ви можете, загалом, використовувати змінну `event` всередині атрибута. + +```html +
Клацни мене!
+ +
Клацни мене!
+``` + +## Дивіться також + +- [Елементи HTML](/uk/docs/Web/HTML/Element) diff --git a/files/uk/web/html/attributes/readonly/index.md b/files/uk/web/html/attributes/readonly/index.md new file mode 100644 index 0000000000..52c44f4213 --- /dev/null +++ b/files/uk/web/html/attributes/readonly/index.md @@ -0,0 +1,89 @@ +--- +title: "Атрибут HTML: readonly" +slug: Web/HTML/Attributes/readonly +page-type: html-attribute +browser-compat: + - html.elements.input.readonly + - html.elements.textarea.readonly +--- + +{{HTMLSidebar}} + +Булів атрибут **`readonly`** (лише для зчитування), коли присутній, робить елемент незмінним, що означає, що користувач не може редагувати його. + +{{EmbedInteractiveExample("pages/tabbed/attribute-readonly.html", "tabbed-shorter")}} + +## Огляд + +Якщо атрибут `readonly` заданий на елементі поля, то, оскільки користувач не може редагувати поле, такий елемент не бере участі в перевірці обмежень. + +Атрибут `readonly` підтримується типами `{{HTMLElement("input")}}` `{{HTMLElement("input/text","text")}}`, `{{HTMLElement("input/search","search")}}`, `{{HTMLElement("input/url","url")}}`, `{{HTMLElement("input/tel","tel")}}`, `{{HTMLElement("input/email","email")}}`, `{{HTMLElement("input/password","password")}}`, `{{HTMLElement("input/date","date")}}`, `{{HTMLElement("input/month","month")}}`, `{{HTMLElement("input/week","week")}}`, `{{HTMLElement("input/time","time")}}`, `{{HTMLElement("input/datetime-local","datetime-local")}}` і `{{HTMLElement("input/number","number")}}`, а також контрольним елементом форм `{{HTMLElement("textarea")}}`. Коли він присутній на будь-якому з них, спрацьовує збіг з псевдокласом `{{cssxref(':read-only')}}`. Якщо його немає, то спрацьовує збіг з псевдокласом `{{cssxref(':read-write')}}`. + +Цей атрибут не підтримується та не стосується `{{HTMLElement("select")}}` і типів полів, які й так не можуть змінюватися, наприклад, {{HTMLElement("input/checkbox","checkbox")}} та {{HTMLElement("input/radio","radio")}}, або за визначенням не можуть зразу з'являтися зі значенням, наприклад, типів поля {{HTMLElement("input/file","file")}}. {{HTMLElement("input/range","range")}} та {{HTMLElement("input/color","color")}}, оскільки обидва мають усталені значення. Також не підтримується на {{HTMLElement("input/hidden","hidden")}}, адже не можна очікувати, що користувач заповнить форму, що прихована. Він також не підтримується на будь-якому з типів кнопок, включно з `image`. + +> **Примітка:** Лише текстові контрольні елементи можуть стати лише для зчитування, адже для решти контрольних елементів (як то полів для галочки та кнопок) немає змістовної відмінності між станами лише для зчитування та вимкненості, тому атрибут `readonly` не застосовується. + +Коли поле має атрибут `readonly`, то до нього також застосовується псевдоклас {{cssxref(":read-only")}}. І навпаки, поля, які підтримують атрибут `readonly`, але не мають його, відповідають псевдокласу {{cssxref(":read-write")}}. + +### Взаємодія між атрибутами + +Різниця між [`disabled`](/uk/docs/Web/HTML/Attributes/disabled) і `readonly` полягає в тому, що поля лише для зчитування все одно можуть працювати та є фокусовними, натомість вимкнені поля не можуть отримати фокус та не подаються разом із формою та, як правило, не працюють як контрольні елементи, поки не будуть увімкнені. + +У зв'язку з тим, що поле лише для зчитування не може бути змінено шляхом взаємодії з ним користувача, атрибут [`required`](/uk/docs/Web/HTML/Attributes/required) не має жодної дії на поля, на котрих також заданий атрибут `readonly`. + +Єдиний спосіб динамічно змінити значення атрибута `readonly` — це за допомогою сценарію. + +> **Примітка:** Атрибут `required` не дозволяється на полях, на яких заданий атрибут `readonly`. + +### Використовність + +Браузери показують атрибут `readonly`. + +### Валідація обмежень + +Якщо елемент – лише для зчитування, то значення такого елемента не може бути оновлено користувачем та не бере участі у валідації обмежень. + +## Приклад + +### HTML + +```html +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+``` + +### Результат + +{{EmbedLiveSample('pryklad')}} + +## Специфікації + +{{Specifications}} + +## Сумісність із браузерами + +{{Compat}} + +## Дивіться також + +- {{cssxref(':read-only')}} та {{cssxref(':read-write')}} +- {{htmlelement('input')}} +- {{htmlelement('select')}} diff --git a/files/uk/web/html/element/a/index.md b/files/uk/web/html/element/a/index.md index 25d9babd85..12040a7b69 100644 --- a/files/uk/web/html/element/a/index.md +++ b/files/uk/web/html/element/a/index.md @@ -477,9 +477,7 @@ document Неявна роль ARIA link, коли присутній атрибут href, інакше – - жодної відповідної ролі + generic diff --git a/files/uk/web/html/element/audio/index.md b/files/uk/web/html/element/audio/index.md new file mode 100644 index 0000000000..1e31829d29 --- /dev/null +++ b/files/uk/web/html/element/audio/index.md @@ -0,0 +1,450 @@ +--- +title: "